谷歌地圖不完全加載模式

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'處理程序中 - 你已作出元素可見後。 （是的，這意味着你可能想重新考慮你的動畫，因爲沒有任何東西會「淡入」。