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

谷歌地图有时会部分与其他区域变灰。有一个问题，如果我们启动Firebug，图像确实来自灰色区域。不知道为什么会发生这种情况。任何人都曾经历过这个并找到解决方案，请分享。谷歌地图部分来自灰色区域，而不是来自谷歌服务器的图像

来源

2010-10-01 Vishwanath

那么究竟是什么导致这种行为？ – slugster 2010-10-01 11:15:02

它不一致，只发生一段时间。使用谷歌地图API的V2。这是否有帮助... – Vishwanath 2010-10-01 12:12:05

正如[本评论]（http://stackoverflow.com/a/9246072/877353）中所建议的那样，将大小映射到地图容器应该可以解决此问题。它为我做了 – 2015-08-20 12:41:41

此错误可能会发生，如果你调整地图的DIV。调整大小后，请尝试拨打gmap.checkResize()函数。

来源

2010-10-11 14:50:11

+14

在V3中，checkResize已折旧。 V3的解决方案可以在http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div – wooncherk 2013-02-18 07:06:06

找到一个网站的插件 – 2017-05-22 13:49:26

从评论：'google.maps.event.trigger （''，“调整大小”）' – 2017-12-20 13:48:38

如果您正在使用V3尝试

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

而且看看here

来源

2010-10-02 13:46:59

非常感谢 - 它帮助了我！ – Eamorr 2011-06-17 20:48:25

...再次。谷歌搜索谷歌地图api灰色空间，并得到这个网页。真棒。在我的情况下，我的地图对象是在另一个对象内部实例化的，而不是全局的，所以确保'map'引用正确的对象！ – 2011-12-09 15:30:07

谢谢，2013年仍然像魅力一样！ – 2013-08-18 15:53:43

嗨，如果你在一个地图容器用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()); 
}

不要忘记设置地图变量作为全球;）欢呼

来源

2011-07-06 13:07:22 MRodrigues

好工作它的工作，谢谢你 – 2014-09-17 13:14:37

我发现了部分加载谷歌地图一个简单的解决方案。通常这是由于在页面的其余部分（包括地图元素）未完全加载时调用onLoad()所致。这会导致部分地图加载。解决此问题的一个简单方法是更改您的身体标记操作。

老办法：

onload="initialize()"

的新方法：

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

此等待2秒钟，谷歌的JavaScript访问正确的大小属性之前。另外请确保在尝试之前清除浏览器缓存;有时它被卡在那里:)

这是我的首要JavaScript部分的情况下，你想知道（完全是在谷歌文档中描述，而是因为我打电话从PHP变量Latitude和Longitude，因此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>

来源

2012-06-15 04:46:10 Milan

你是一个genuis！这应该是最好的答案。 – Lan 2015-12-25 01:25:10

我只想添加到这个讨论，我有这个问题，灰色条纹以及这与wasen't同样的问题，我需要使用gmap.Resize函数，但它是在我的CSS在我的CSS我有

img { 
max-width:50% 
}

所以当我将其设置在我的css文件中时

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

问题消失了！我看了谷歌，但无法找到这个答案。

来源

2014-08-01 18:37:12 Izekid

这种风格的解决我的问题

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

这迫使浏览器，让地图一样宽，它需要 - 在!important实际上意味着“不覆盖这种风格”。

来源

2015-10-20 08:18:49

我解决了它这种方式，我的问题是在旋转装置，这种解决方案的伟大工程：

$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();

来源

2016-01-15 11:32:03

我有这个问题上弹出我的网站的其他地方工作时，所以我没注意到它正确的时候开始。在我的CSS

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

：通过我在最后一小时的每次改变会后，我碰到的罪魁祸首。我删除了，瞧，它的作品。（当然，我可以改变我的地图div上的溢出属性，但我只需要在多个div上使用overflow：auto。）我确定有一个很好的理由，但我很新，所以我不知道知道。无论如何，我希望这可以帮助某人。

来源

2017-04-27 02:06:47 hiqwertyhi

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

回答

相关问题