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

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

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

所以删除它：

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

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

谷歌地图不会完全加载模态

1 个答案: