Question

我已经看过几个相似的问题，但我还没有找到解决方案。

我有这个页面：http://www.citizensmemorial.com/Test2014/locations/cmh-infectious-disease-and-internal-medicine-clinic/index.html

我正在使用此代码：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBs_4MZDYZTCtkoB-Hbo4qQyWy-qHQuEdA"></script>
<script>
var mapExists = document.getElementById('map-canvas'); if(mapExists) 
var map;
function initialize() {
var myLatLng = new google.maps.LatLng (37.625387, -93.424350)
  var mapOptions = {    
    zoom: 12,
    center: myLatLng
  };   
 map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
       var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      title: 'CMH Infectious Disease & Internal Medicine Clinic'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>

以下是适用的css：

html, body, #map-canvas {
    width:100%;
    height:100%
}
#map_canvas {
position: relative;
}
.map-holder {
width:500px;
    height:270px;
    padding: 0px;
    display:table; 
    margin-top:3px; 
    float:right;
}

我假设它是与css相关的东西，使地图保持居中，因为我已经在这个网址上测试了地图代码并且它正在工作： http://www.citizensmemorial.com/Temp/mapTest.html

Answer 1

在map-canvas div可见之前，您似乎正在初始化地图。您需要触发调整大小，否则地图不会知道其正确的大小。

初始化地图调用后，地图会调整大小

google.maps.event.trigger(map, "resize");

然后将地图中心设置为您的标记。

map.setCenter(markerlatlng);

Answer 2

我检查了你的代码。请检查适用于您已测试的page的此css。如果您的问题与CSS有关。

您可以使用firebug来测试css。

<div id='map-canvas' style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>

并且你的代码是自己的，它正常运行。如果你想根据标记或infowindow使地图居中。你可以使用map.setCenter（map）; 至于infowindow，你可以在你的选择中使用位置。有关详细信息和参考资料，请阅读this。

Google Maps API v3 - 隐藏的Div - 地图不以div为中心

2 个答案: