Google地图API v3地图未完全加载 [英] Google Maps API v3 map not loading completely

问题描述

我在谷歌地图上遇到了一些困难。问题是，只有一小部分的地图加载如下所示：

在页面加载后，如果我调整浏览器的大小，即使是最轻微的量，这也会导致完整的地图刷新，加载正确，如下所示：

这是我的javascript代码：

  google.maps.event.addDomListener（window，'load'，初始化）; 
 $ b $（document）.ready（function（）{
 var $ width = document.getElementById（propertysection）。offsetWidth; 
 $（'＃map-canvas- 2'）。width（$ width-28-175）; 
 $（'＃map-canvas-2'）。height（$ width）; 
 $（'＃myGridMap'）。height $ width）; 
}）; 
 
函数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）
}）; 
} 
  

任何人都可以提出什么问题？感谢。

解决方案

您不应该将jquery ready方法与窗口加载事件混合使用（请参阅 http://api.jquery.com/ready/ ）。

相反，在.ready函数中调用initialize，或者将窗口调整大小函数放置在初始化方法本身中（初始化映射之前）。

I am having some difficulty with a google map. The problem is that only a small portion of the map is loading as shown here:

After the page loads, if I resize the browser even the slightest amount, this causes the complete map to refresh and load correctly, as shown here:

Here is my javascript code:

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

Can anyone suggest what the problem might be? Thanks.

解决方案

You shouldn't mix the jquery ready method with the window load event (see http://api.jquery.com/ready/).

Instead, call initialize from within your .ready function, or place the window resize functions in the initialize method itself (before initializing the map).

这篇关于Google地图API v3地图未完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！