我已经查看了几个类似的问题,但仍然没有找到解决方案。
我正在使用此代码:
<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 相关,导致 map 无法居中,因为我已经在这个 url 上测试了 map 代码并且它正在工作: http://www.citizensmemorial.com/Temp/mapTest.html
最佳答案
看起来您正在初始化 map ,然后 map Canvas div 可见。您需要触发调整大小,否则 map 将不知道其正确的大小。
初始化 map 后调用 map 调整大小
google.maps.event.trigger(map, "resize");
然后将 map 中心设置为您的标记。
map.setCenter(markerlatlng);
关于javascript - Google Maps API v3 - 隐藏 Div - map 未以 div 为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28030786/