谷歌地图没有出现在模态弹出窗口中答案

【问题标题】：Google Map Does not appear in Modal Popup谷歌地图没有出现在模态弹出窗口中
【发布时间】：2016-03-26 16:32:51
【问题描述】：

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

这里是 HTML -

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

JS -

function initialize() {
    var myloc = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        zoom: 17,
        center: myloc,
        scrollwheel: false
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map,
        animation: google.maps.Animation.BOUNCE
    });
    var contentString = '<div id="content" style="dir:rtl; text-align:right;">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading"><h1>title here</h1>'+
            '<div id="bodyContent">'+
            '<p>description here</p>'+
            '</div>'+
            '</div>';
    var infowindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 250
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

这是弹出式预览图像 - Image Preview

【问题讨论】：

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

【解决方案1】：

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

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

希望这会有所帮助。

【讨论】：

@zakaria .. 它有效.. 但第一次点击它不起作用。当我第二次单击按钮时，它就起作用了。你能帮忙吗？我在哪里做错了？？
@sajalsuraj 确保地图在第一次点击之前被初始化，听起来像是第一次点击初始化地图然后第二次刷新它。
感谢@JoaquínO 在这里的干预，你说得对，他应该在全球范围内定义地图。

【解决方案2】：

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

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

【讨论】：