Bootstrap Modal 中 Google Maps 的灰色地图答案

【问题标题】：Grey Map of Google Maps inside Bootstrap ModalBootstrap Modal 中 Google Maps 的灰色地图
【发布时间】：2015-11-02 19:35:10
【问题描述】：

我在引导模式中有一张灰色的谷歌地图。

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

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

任何想法或解决方案我可以如何解决这个问题？

【问题讨论】：

【解决方案1】：

使用bootstrap modal events ？

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

【讨论】：

【解决方案2】：

好吧，在玩了一会儿之后，我找到了解决方案。在等待一秒钟直到弹出窗口（模态）打开后，我调用了一个调用 google.maps.event.trigger(map, 'resize') 的函数。使用 onclick="initMapModal()" 调用此函数。

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

}

【讨论】：

【解决方案3】：

您应该使用文档中描述的引导模式事件：

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

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

确保在创建地图变量后添加它

【讨论】：