地図マーカーを中心にしない

Question

私はGoogleマップを使ってページを作成しました。一般的な場所が表示されますが、マーカーの周囲には表示されません。私はいくつかのチュートリアルを終了し、問題は解決しません。私は#mapコンテナdivのサイズをインラインとスタイルシートの両方に合わせ、同じ結果を得ました。私は自分のページをスタイルするために、Twitterのブートストラップを使用しています。ここで

は私のHTML/JS

... 
<div class="col-sm-6"> 
    <div id="map" style="height:300px"> 
    </div> 
</div> 
... 

<script> 
    var map; 
    function initMap() { 
     var mapOptions = { 
     center: new google.maps.LatLng(31.7717067, -106.3308777), 
     zoom: 15, 
     mapTypeId: 'roadmap' 
     }; 
     map = new google.maps.Map(document.getElementById('map'), mapOptions); 
     addMarker(); 
     } 
</script> 
<script> 
     function addMarker(){ 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(31.7717067, -106.3308777), 
      map: map 
     }); 
</script> 

マイCSS

#map { 
    height: 100%; 
    } 
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 

Answer 1

であるあなたは、1つの関数にCSSについては

function initMap() { 
    var location = {lat: 51.513347, lng: -0.088986}; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: location 
    }); 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
} 

をそれをすべて持つことができ、これを試してみてください。

#map { 
height: 400px; 
width: 100%; 
border-radius: 10px; 
background: #000; 
} 

を

Answer 2

私はこの見解をハッキングし、panToメソッドを使用しました。これが正しいことであるかどうかはわかりませんが、私は必要なビューを得ました。

var map; 
function initMap() { 
    var location = {lat: 51.513347, lng: -0.088986}; 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: location 
    }); 
    var marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 
    var latLng = new google.maps.LatLng(31.777423, -106.341530); 
    map.panTo(latLng); 
}