有时候 Google 地图会部分缺失，其他区域会变成灰色。但是有个问题，如果我们打开 Firebug，在灰色区域的图片就会出现。不知道为什么会出现这种情况。 如果有人经历过并找到解决方案，请分享。
谷歌地图部分显示，灰色区域代替了从谷歌服务器获取的图像。
61
- Vishwanath
5
1那么你到底是做了什么导致了这种行为？ - slugster
它不稳定，只有有时候会发生。使用谷歌地图API的v2版本。这能帮到你吗... - Vishwanath
如此评论所建议的，将地图容器的大小设置为像素应该可以解决这个问题。对我来说确实奏效了。 - Alexandre Bourlier
关于这个解决方案：<code>#map_canvas img { max-width: none !important; }</code>，它是由我们的一位同事之前提供的，已经起作用，并解决了在Chrome和Firefox上打印动态Google地图时遇到的棘手问题。当然，我仍然在Firefox上遇到标记（部分可见）的问题。
无论如何，需要对这个解决方案做出解释，以及为什么浏览器会以这种特定的方式来表现。如果有人知道，请随时写下来。 - Morteza Ghelichkhani
我注意到错误只发生在IE浏览器中。幸运的是，我可以让用户切换到Chrome浏览器。 - RonaldPaguay
9个回答
82
- Argiropoulos Stavros
5
再说一遍。在谷歌上搜索“谷歌地图API灰色空间”，然后就找到了这个页面。太棒了！在我的情况下，我的地图对象是在另一个对象内部实例化的，而不是全局的，因此请确保
map指向正确的对象！ - Julian H. Lam12015年也要加油！非常感谢 :) - Timo D
2015年了，你还在收到它们！ - Tom
代码可以正常工作，但我只需要调用map.panTo(new google.maps.LatLng(lat, lng))来恢复位置。另外，在Angular中，这两个调用都应该包装在$timeout(function() { //here });中。 - parliament
必须包含以下代码：
window.onload = function(){google.maps.event.trigger(map, "resize")} - openwonk36
如果您调整地图的 DIV 大小，可能会出现此错误。调整大小后，请尝试调用 gmap.checkResize() 函数。
- Hitman_99
3
14在V3版本中，checkResize已经被弃用。有关V3的解决方案可以在http://blog.codebusters.pl/en/entry/google-maps-in-hidden-div找到。 - wooncherk
1哎呀，这是一个网站的插件。 - Josh Usre
从注释中：
google.maps.event.trigger(<map>, "resize") - Ujjwal Singh7
嗨，如果您在带有地图容器的div中使用toggle，则需要在函数中调用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() );
}
不要忘记将地图变量设置为全局变量;) 祝福。
- MRodrigues
7
我找到了一个简单的解决部分加载谷歌地图的方法。通常这是由于在页面（包括您的地图元素）没有完全加载时调用 onLoad() 导致的部分地图加载。解决此问题的简单方法是更改您的 onLoad body 标签操作。
旧方法：
onload="initialize()"
新的方式：
onLoad="setTimeout('initialize()', 2000);"
在 Google Javascript 访问正确的大小属性之前，需要等待 2 秒。在尝试之前确保清除浏览器缓存；有时它会卡住 :)
这是我最重要的 Javascript 部分，如果你好奇的话（完全按照 Google 文档描述，但因为我从 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>
- Milan
1
你是个天才！这应该是最佳答案。 - Lan
4
我想补充一下，我也遇到了灰色条纹的问题，但这并不是需要使用gmap.Resize函数的同一个问题，而是我的CSS中存在问题。在我的CSS中，我有
img {
max-width:50%
}
当我在我的CSS文件中设置这个时
#map-canvas {
max-width:none;
}
问题已经消失了！我在谷歌上搜索了很久，但找不到答案。
- Izekid
2
这个样式解决了我的问题。
#map_canvas img { max-width: none !important; }
这将强制浏览器允许地图宽度尽可能宽 - !important 实际上意味着“不要覆盖此样式”。
- Ahmad Alaa
2
以上解决方案对我无效。
我使用了display:none来隐藏我的地图，将其更改为visibility:hidden后，它对我有效。
更改：
display:none
为
visibility:hidden
- Muthu17
0
我是这样解决的，我的问题在于旋转设备，这个解决方案非常好用：
$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();
- Kike Jimenez
0
我在处理网站的其他部分时遇到了这个问题，所以一开始没有注意到它。经过检查我在过去一个小时内所做的每一个更改后，我找到了罪魁祸首：
div
{
[... other css ...]
overflow: auto;
}
在我的CSS中。 我把它移除了，哇，它就可以工作了。（当然，我也可以改变我的地图div上的溢出属性，但我只需要在几个div上使用overflow: auto。）我相信这背后有一个很好的原因，但我还是比较新手，所以不知道。无论如何，我希望这能帮助到某些人。
- hiqwertyhi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接