提问人：DanielAttard 提问时间：3/25/2013 更新时间：4/27/2014 访问量：4178
Google Maps API v3 地图未完全加载
Google Maps API v3 map not loading completely
问：
我在谷歌地图上遇到了一些困难。问题在于只有一小部分地图正在加载，如下所示：
页面加载后，如果我稍微调整浏览器的大小，这会导致整个地图正确刷新和加载，如下所示：
这是我的javascript代码：
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
var $width = document.getElementById("propertysection").offsetWidth;
$('#map-canvas-2').width($width-28-175);
$('#map-canvas-2').height($width);
$('#myGridMap').height($width);
});
function initialize() {
var map;
var propertyMap;
var marker;
var infowindow;
var myOptions = {
zoom: 6,
center:new google.maps.LatLng(50.7,-86.05),
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas-2"),myOptions);
infowindow = new google.maps.InfoWindow({
content: 'Property Info',
position: new google.maps.LatLng(0, 0)
});
}
谁能建议问题可能是什么？谢谢。
答：
5赞
jlivni
3/25/2013
#1
不应将 jquery ready 方法与窗口加载事件混合使用（请参阅 http://api.jquery.com/ready/）。
相反，请从 .ready 函数中调用 initialize，或将窗口调整大小函数放在 initialize 方法本身中（在初始化映射之前）。
0赞
florian
4/27/2014
#2
我正在使用 bootstrap 和一个大型菜单，我使用官方的 Google Maps API 异步加载函数解决了它。https://developers.google.com/maps/documentation/javascript/tutorial#asynch
function initialize() {
var myLatLng = new google.maps.LatLng(37.4221147, -122.0867373);
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(37.4221147, -122.0867373),
zoom: 12,
mapTypeControl: false,
panControl: false,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_CENTER
},
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options);
var contentString =
'<b>Google Gate Bridge</b>' +
'<p>Mountain View, CA 94043, USA</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map,marker);
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var tab = document.getElementById('YourHtmlObjectID');
YourHtmlObjectID.onmouseover = loadScript;
YourHtmlObjectID.onclick = loadScript;
评论