多个Google地图错误

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