Google Map不会出现在Modal Popup中

时间:2015-12-20 13:29:52

标签: javascript jquery twitter-bootstrap google-maps bootstrap-modal

我想在模态弹出窗口中显示谷歌地图,但它似乎没有出现。需要帮助。

这是HTML -

for (var i = 0; i < ARABIC_PUNC_AND_REPLACEMENTS[0].length; i++) {
   string = string.replace(new RegExp(ARABIC_PUNC_AND_REPLACEMENTS[0][i], 'g'),
     ARABIC_PUNC_AND_REPLACEMENTS[1][i]);
}

console.log(string);
//=> "،،، ؛؛؛"

JS -

<div id="map-canvas" style="width: 600px; height: 450px; background-color: grey;padding:0;margin:0"></div>

这是弹出预览图像 -   Image Preview

2 个答案:

答案 0 :(得分:7)

您应该在显示的模式上使用resize来刷新地图:

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

希望这有帮助。

答案 1 :(得分:3)

我已经为模态弹出窗口中的静态地图加载添加了这个。

google.maps.event.addListener(map, "idle", function()
{
   google.maps.event.trigger(map, 'resize');
});