javascript - 不以 map 标记为中心

Question

我创建了一个带有谷歌地图的页面，它显示了大概的位置，但它并不以标记为中心。我已经阅读了几个教程，但问题仍然存在。我在内联和样式表上都调整了#map 容器 div 的大小，并获得了相同的结果。我正在使用 twitter bootstrap 来设计我的页面。

这是我的 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

我破解了 View 并使用了 panTo方法。不确定这样做是否正确，但我得到了所需的 View 。

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); 
}