多个谷歌地图错误[关闭]答案

【问题标题】：Multiple Google maps bug [closed]多个谷歌地图错误[关闭]
【发布时间】：2013-11-15 06:24:00
【问题描述】：

我尝试在一个页面上显示多个自定义谷歌地图，但是当一个页面显示时，另一个出现错误，如下所示：

我不觉得它来自我的代码，因为两个容器都适合正确的大小（并且 Google 徽标和“使用条款”正确显示）。但是，“地图图块”不会显示在第二张地图中，而是应用灰色背景。

有什么想法/建议吗？

编辑：第一张地图似乎总是显示，而其他地图总是被窃听。

【问题讨论】：

你能分享一些代码吗？每个浏览器上都有这个吗？
第二张地图看起来就像地图在需要调用其调整大小函数时所做的那样。
嗯。我希望这是一个已知的错误。这个例子来自 Chrome，也发生在 Firefox 上。实际上，这种情况并非每次都发生，有时第二个被窃听但不是第一个......我使用 json-p 加载地图数据，所以我猜它是“先到先得”。并且显示代码非常棘手，因为有很多文件有很多方法......我会试着弄清楚。
给google.maps.event.trigger(secondmap, 'resize'); 看看会发生什么。
我已将其添加为答案。

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

【解决方案1】：

给google.maps.event.trigger(secondmap, 'resize'); 看看会发生什么。

【讨论】：

我在你自己的答案周围发现了一些糖：stackoverflow.com/questions/17059816/… 另一个在这里：blog.codebusters.pl/en/entry/google-maps-in-hidden-div 但尽管它似乎与我的问题相匹配，但它并没有解决它。我仍然有这个问题。

【解决方案2】：

我终于找到了解决我的问题的方法，这是@Andy 的解决方案和我的解决方案之间的混合。 resize 事件确实必须被触发，但是缩放级别和地图中心没有正确显示，如下所示：

为了更新缩放级别和中心，我使用了这个自制的方法，它根据地图标记更新地图的边界：

var updateBounds = function ( map, markers ) {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0, len = markers.length ; i < len ; i++ ) {
        bounds.extend ( markers[i].marker.position );
    }

    // extend bounds using two invisible markers so the markers don't get too close to the map borders
    var
        extendPoint1 = new google.maps.LatLng ( bounds.getNorthEast().lat() + 0.001, bounds.getNorthEast().lng() + 0.001 ),
        extendPoint2 = new google.maps.LatLng ( bounds.getNorthEast().lat() - 0.001, bounds.getNorthEast().lng() - 0.001 );

    bounds.extend ( extendPoint1 );
    bounds.extend ( extendPoint2 );

    map.fitBounds ( bounds );
};

【讨论】：