Google지도가 모달에 완전히로드되지 않습니다.

Question

오픈 모달 모드의 Google지도 및 jquery 2.1.0 라이브러리를 사용하고 있습니다.

#main div에 #map을 넣으면 정상적으로 작동합니다. 하지만 #map을 #modal div에 넣으면 완전히로드되지 않습니다. 여기

는

<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> 

내 예제는 여기에 HTML

입니다 : http://www.demiray.co/ex/map.html

Answer 1

그것은 당신이 요소가 가시화 한 후지도 API가 요소에 대한 정보를 사용하기 때문에, Google지도를 초기화하는 것이 가장 좋습니다 레이아웃을 지시합니다. 요소가 표시되지 않으면 크기 정보가 신뢰할 수 없으며 사용자가 만든지도가 보이게 만들 때 제대로 표시되지 않습니다.

또한 사용자가지도를 요청할 때 지연이있을 수도 있지만지도를 요청하지 않은 사용자의지도를로드하려고 시도하지 않는다는 것을 의미합니다.

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

을 그리고 대신 $('#modal-open').on('click' 핸들러 내에서 init() 전화 - 당신이 요소가 가시화 한 후에 :

그래서를 제거합니다. (예, 이것은 아직 페이드 인 할 것이 없으므로 애니메이션을 다시 생각할 수 있음을 의미합니다.)