Google Maps API v3地图未完全加载

Question

我在使用谷歌地图时遇到了一些困难.问题是只有一小部分地图正在加载,如下所示:

页面加载后,如果我将浏览器的大小调整到最小,这会导致整个地图刷新并正确加载,如下所示:

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

任何人都可以建议问题可能是什么？谢谢.

Answer 1

您不应该将jquery ready方法与窗口加载事件混合(请参阅http://api.jquery.com/ready/).

而是从.ready函数中调用initialize,或者将窗口调整大小函数放在initialize方法本身中(在初始化映射之前).