谷歌地图在 Bootstrap 选项卡式界面中失去其长/纬度

Question

我正在使用ACF's Google Map 在我的页面上加载地图。我几乎完全复制了所有内容并稍微修改了地图 js，并在其上添加了更多选项以用于样式目的。我必须主要更改这部分才能加载地图：

$('a[href="#directions"]').on('shown.bs.tab',function(){
        $('.hotel-map').each(function(){
            // create map
            map = new_map( $(this) );
            google.maps.event.trigger(map, 'resize');
        });
    });

使用他们准备好的文档不起作用，地图将显示为灰色框。上面的代码更改会生成一个地图，但是，一旦我单击另一个选项卡，然后返回到保存地图的选项卡，经度和纬度似乎消失了。它会加载一个远离某处的地图。

这是完整的 js code。

编辑 这就是我将代码更新为：

$(document).ready(function(){

        $('.hotel-map').each(function(){
            // create map
            map = new_map( $(this) );
        });

    });

    $('a[href="#directions"]').on('shown.bs.tab',function(){
        // popup is shown and map is not visible
        google.maps.event.trigger(map, 'resize');
        center_map( map );
    });

Answer 1

触发地图调整大小后，调用 center_map(map);函数（在您链接的代码中），它将使地图以您的标记为中心。