javascript - 多个谷歌地图错误

Question

我尝试在一个页面上显示几个自定义谷歌地图，但是当显示一个时，另一个被窃听，如下所示：

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

有什么想法/建议吗？

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

Answer 1

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

Answer 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 );
};