Javascript 谷歌地图不会出现在模式弹出窗口中

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

这是HTML-

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

JS-

函数初始化（）{
var myloc=new google.maps.LatLng（-34.397150.644）；
变量映射选项={
缩放：17，
中心：myloc，
滚轮：错误
};
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var marker=new google.maps.marker({
位置：map.getCenter（），
地图：地图，
动画：google.maps.animation.BOUNCE
});
var contentString=''+
''+
''+
“标题在这里”+
''+
“此处描述
”+
''+
'';
var infowindow=new google.maps.infowindow({
content:contentString，
最大宽度：250
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

这是弹出的预览图像-

---

您应该在显示的模式上使用

调整大小

，以刷新地图：

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

---

希望这能有所帮助。

我已经为模式弹出窗口中的静态地图加载添加了此选项

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

---

@扎卡里亚。。它起作用了。。但在第一次点击时，它不起作用。当我第二次点击按钮时，它就工作了。你能帮忙吗。我犯错误的地方？？？@sajalsuraj确保在第一次单击之前对地图进行了初始化，听起来像是第一次单击地图，然后再次刷新。感谢@JoaqínO在这里的干预，你说得对，他应该在全局范围内定义地图。

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