Javascript 不以地图标记为中心

我用谷歌地图创建了一个页面，它显示了大致位置，但没有围绕标记居中。我已经阅读了好几篇教程，问题依然存在。我在内联和样式表上调整了#map container 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>

---

您可以在一个函数中实现所有功能

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

对于CSS，请尝试以下方法：

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

---

我侵入了视图并使用了该方法。我不确定这样做是否正确，但我得到了所需的视图

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

---

谢谢你的建议@EyedFox1，我仍然有这个问题。我甚至把“map”变量设为全局变量，但结果是一样的。你能给我一张它的样子吗？我用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); 
}