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

【问题标题】：Google map comes partially, grey area comes instead of images from google server谷歌地图部分出现，灰色区域而不是来自谷歌服务器的图像
【发布时间】：2011-04-19 19:26:06
【问题描述】：

有时谷歌地图会部分显示其他区域变灰。有一个问题，如果我们启动 Firebug，图像确实会出现在那个灰色区域。不知道为什么会这样。任何人都经历过这个并找到了解决方案，请分享。

【问题讨论】：

那么你到底在做什么导致这种行为？
它并不一致，只会发生一段时间。使用谷歌地图 api 的 v2。这有帮助吗...
正如this comment 中所建议的，将像素大小放入地图容器应该可以解决此问题。它对我有用
关于这个解决方案：#map_canvas img { max-width: none !important; } 之前由我们的一位同事提供，它正在解决在 chrome 和 Firefox 上打印动态谷歌地图的棘手问题。当然，我仍然对 Firefox 上的标记（部分可见）有问题。无论如何，有必要对这个解决方案进行解释，以及为什么浏览器会以这种特定方式运行。如果有人这样做，请随时写。
我注意到这个错误只发生在 IE 中。幸运的是，我可以让用户切换到 Chrome。

标签： javascript google-maps google-maps-api-2

【解决方案1】：

27/02/2020 更新
不再需要手动触发调整大小事件。

如果您使用的是 v3，请尝试

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

也可以看看here

【讨论】：

非常感谢 - 它帮助了我！
... 再次。谷歌搜索google maps api grey space，得到了这个页面。惊人的。在我的例子中，我的地图对象是在另一个对象中实例化的，而不是全局的，所以请确保 map 引用了正确的对象！
2015 年！非常感谢:)
2015 年，您仍然可以得到它们！
有效，但我只需要调用 map.panTo(new google.maps.LatLng(lat, lng)) 即可恢复位置。同样在角度，两个调用都应该包含在 $timeout(function() { //here });

【解决方案2】：

如果您调整地图的DIV 的大小，可能会出现此错误。调整大小后，尝试调用gmap.checkResize() 函数。

【讨论】：

在 V3 中，checkResize 已折旧。 V3 的解决方案可以在blog.codebusters.pl/en/entry/google-maps-in-hidden-div 找到
是一个网站插件
来自评论：google.maps.event.trigger(, "resize")

【解决方案3】：

您好，如果您在带有地图容器的 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() );
}

不要忘记将地图变量设置为全局变量；）干杯

【讨论】：

【解决方案4】：

我为部分加载的谷歌地图找到了一个简单的解决方案。通常它是由在页面的其余部分（包括您的地图元素）未完全加载时调用 onLoad() 引起的。这会导致部分地图加载。解决此问题的一种简单方法是更改您的 onLoad 正文标记操作。

老办法：

onload="initialize()"

新方式：

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

这会在 Google Javascript 访问正确的尺寸属性之前等待 2 秒。还要确保在尝试之前清除浏览器缓存；有时它会卡在那里:)

如果您想知道，这是我最重要的 Javascript 部分（完全如 Google 文档中所述，但因为我从 PHP 变量调用 Latitude 和 Longitude，因此是 PHP sn-ps。

<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>

【讨论】：

你是个天才！这应该是最佳答案。

【解决方案5】：

我只是想在这个讨论中补充一点，我也遇到了灰色条纹的问题，这与我需要使用 gmap.Resize 函数的问题不同，但它在我的 css 中。在我的 CSS 中，我有

img { 
max-width:50% 
}

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

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

问题消失了！我在谷歌上找遍了，但找不到这个答案。

【讨论】：

【解决方案6】：

这种风格解决了我的问题

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

这会强制浏览器允许地图尽可能宽 - !important 本质上意味着“不要覆盖此样式”。

【讨论】：

【解决方案7】：

上述解决方案对我没有任何作用。

我在地图中使用了display:none，将其更改为visibility:hidden 对我来说效果很好。

改变

display:none

到

visibility:hidden

【讨论】：

【解决方案8】：

我是这样解决的，我的问题出在旋转装置上，这个解决方案效果很好：

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

【讨论】：

【解决方案9】：

我在网站的其他部分工作时弹出了这个问题，所以在它开始时我没有注意到它。在经历了我在过去一个小时所做的所有更改之后，我遇到了罪魁祸首：

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

在我的 CSS 中。我删除了它，瞧，它有效。（当然，我可以只更改地图 div 上的溢出属性，但我只需要在几个 div 上使用 overflow: auto。）我敢肯定这是有充分理由的，但我对此很陌生，所以我不知道。无论如何，我希望这可以帮助某人。

【讨论】：