Google地图不能完全加载到模式

Question

我使用的是google地图和jquery 2.1.0库以及open-close模式。

当我将#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

最好在使元素可见之后初始化Google Maps，因为地图API使用有关元素的信息来指示布局。当元素不可见时，大小信息不可靠，当您使其可见时，您创建的地图看起来也不正确。

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

所以把这个去掉：

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

取而代之的是，在使元素可见之后，从$('#modal-open').on('click'处理程序中调用init()。(是的，这意味着你可能想要重新考虑你的动画，因为还没有任何东西可以“淡入”。