javascript - 谷歌地图未加载完整

Question

首先我想明确一点，这里找到的解决方案并没有解决。

我正在尝试使用简单的谷歌地图显示模式警报。更多谷歌地图未加载完整：

我的.js：

var map;
function initialize() {
    var mapOptions = {
        zoom : 8,
        center : new google.maps.LatLng(-34.397, 150.644),
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

function showModal() {
    $('#myModal').foundation('reveal', 'open');
}

HTML：

<div id="myModal" class="reveal-modal">
    <div id="map-canvas"></div>
    <a class="close-reveal-modal">&#215;</a>
</div>

我做了测试：

google.maps.event.trigger(map, 'resize');

和：

$('#map-canvas').gmap().triggerEvent('resize');

没有任何效果。任何人都可以帮忙吗？谢谢！

Answer 1

您需要等到模态通过设置超时完成加载或在完成状态下使用模态回调然后初始化地图。