谷歌地图部分来自灰色区域,而不是来自谷歌服务器的图像

有时谷歌地图部分与其他地区变灰。 有一个赶上,如果我们启动Firebug,图像确实来到这个灰色地带。 不知道这是为什么发生。 任何人都经历过这个,find解决办法,请分享。

8 Solutions collect form web for “谷歌地图部分来自灰色区域,而不是来自谷歌服务器的图像”

如果您正在调整地图的DIV则会发生此错误。 resize后,尝试调用gmap.checkResize()函数。

如果你使用v3试试

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

也看看这里

嗨,如果你正在使用切换在一个地图容器div您在函数中调用resizeMap

 associated with the trigger: $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); resizeMap(); return false; 

然后resizeMap(); 喜欢这个

 function resizeMap() { google.maps.event.trigger(map,'resize'); map.setZoom( map.getZoom() ); } 

不要忘记将地图variables设置为全局;)干杯

我发现一个简单的解决scheme,部分加载谷歌地图。 通常这是由于在页面的其余部分(包括地图元素)没有被完全加载的时候调用onLoad() 。 这会导致部分地图加载。 解决此问题的一个简单方法是更改onLoad正文标记操作。

旧的方式:

 onload="initialize()" 

新的方式:

 onLoad="setTimeout('initialize()', 2000);" 

这会在Google Javascript访问正确的大小属性之前等待2秒钟。 另外请确保在尝试之前清除浏览器caching; 有时它卡在那里:)

这是我最喜欢的Javascript部分,以防万一您想知道(完全如Google文档中所述,但是因为我从PHPvariables调用了LongitudeLongitude ,因此是PHP片段。

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function initialize() { var myOptions = { center: new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>), zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var point = new google.maps.LatLng(<?php echo $my_latitude; ?> , <?php echo $my_longitude; ?>); var marker = new google.maps.Marker({ position:point, map:map }) } </script> 

我只是想补充一下这个讨论,我也有这个灰色条纹的问题,这也不是我需要使用gmap.Resize函数的问题,但它是在我的CSS。 在我的CSS我有

 img { max-width:50% } 

所以当我在我的CSS文件中设置

 #map-canvas { max-width:none; } 

问题消失了! 我看了谷歌,但无法find这个答案。

这种风格解决了我的问题

 #map_canvas img { max-width: none !important; } 

这就迫使浏览器允许地图的宽度尽可能地宽, !important意思就是“不要覆盖这种风格”。

我这样解决了,我的问题是在旋转设备上,这个解决scheme效果很好:

 $scope.orientation = function(){ var supportsOrientationChange = "onorientationchange" in window, orientationEvent = supportsOrientationChange ? "orientationchange" : "resize"; window.addEventListener(orientationEvent, function() { $interval(function(){ google.maps.event.trigger(map, 'resize'); },100); }); }; $scope.orientation(); 

我在我的网站的其他部分工作时popup这个问题,所以我没有注意到它开始时的权利。 在经历了过去一小时所做的每一项改变之后,我遇到了罪魁祸首:

 div { [... other css ...] overflow: auto; } 

在我的CSS。 我删除了,瞧,它的工作。 (当然,我可以改变我的地图div上的溢出属性,但是我只需要在多个div上使用overflow:auto。)我确定有一个很好的理由,但是我很新,所以我没有知道。 无论如何,我希望这可以帮助一个人。