谷歌地图不完全加载模式

Question

我使用谷歌地图和jQuery的2.1.0库与开放模式。

当我把#map放在#main div中时，它正常工作。但是当我把#map放在#modal div中时，它并没有完全加载。

这里是HTML

<div id="main"> 
    <div class="inner"> 
     <a href="#" id="modal-open">Open</a> 
    </div> 
</div> 
<div id="modal"> 
    <div class="inner"> 
     <a href="#" id="modal-close">Close</a> 
        <div id="map_canvas" style="height:300px; width:600px;"></div> 
    <!-- The element that will contain our Google Map. This is used in both the Javascript and CSS above. --> 
    </div>    
</div> 

我的例子是在这里： http://www.demiray.co/ex/map.html

Answer 1

最好是初始化谷歌地图所做的元素可见后，因为地图API使用有关的元素信息指定布局。当元素不可见时，尺寸信息不可靠，并且当您使其可见时，您创建的地图看起来不正确。

此外，虽然这意味着用户请求地图时可能会有延迟，但这意味着您不会尝试为未请求地图的用户加载地图。

所以删除此：

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

，而是调用从init()您$('#modal-open').on('click'处理程序中 - 你已作出元素可见后。 （是的，这意味着你可能想重新考虑你的动画，因为没有任何东西会“淡入”。