Bootstrap模态中谷歌地图的灰色地图

Question

我在引导模式中有一个灰色的Google地图地图。

我尝试使用google.maps.event.trigger(map, 'resize')修复它，但它不起作用，因为它在模态打开后没有加载。

如果我在控制台中执行此命令，它可以正常工作。

我有什么想法或解决方法可以解决这个问题吗？

Answer 1

使用bootstrap modal events？

$('#myModal').on('shown.bs.modal', function () {
  google.maps.event.trigger(map, 'resize');
})

Answer 2

好吧，经过一段时间后，我找到了一个解决方案。在等待一秒钟直到PopUp（模态）打开后，我调用了一个调用google.maps.event.trigger（map，'resize'）的函数。使用onclick =“initMapModal（）”调用此函数。

function initMapModal() {
setTimeout(function () {
    google.maps.event.trigger(map, 'resize');
    initMap();
}, 1000);

}

Answer 3

您应该使用docs：

中描述的bootstrap模态事件

http://getbootstrap.com/javascript/

然后在事件回调函数中触发google map resize，如下所示：

$('#myModal').on('shown.bs.modal', function () { google.maps.event.trigger(map, 'resize'); })

确保在创建地图变量

后添加此项