Google지도 숨겨진 div

Question

내 웹 페이지에서 Google지도를 숨기려면 그 중 하나를 사용하고 있습니다. 하지만 div를 확장하고 Google지도를 공개하는 이벤트를 실행하면 표시되지 않습니다. 그리고이 문제는 IE에서만 발생하며 다른 모든 브라우저는 정상적으로 작동합니다. 응답과 함께 다음 코드를 추가하는 것과 같은 질문이 표시되었습니다.

google.maps.event.trigger (map, 'resize');

하지만 그 장소를 어디에 두어야합니까? div가 접힐 때 호출되는 자바 스크립트 함수에 배치했지만 작동하지 않습니다. "지도"를 내지도 이름으로 대체해야합니까? Google 사이트의 코드 "google map"을 Google 사이트에서 가져 와서 붙여 넣었습니다. 내 웹 페이지 ... 설명해주세요.

Answer 1

google.maps.event.trigger(map, 'resize'); 

은 Maps API를 사용하는 경우입니다. 따라서지도는지도 객체에 대한 참조입니다.

하지만 API를 사용하고 있지 않습니다. Google지도에서 iframe을 사용하고 있습니다.

Google지도는 숨겨진 div에있는 것을 좋아하지 않습니다. 내가 믿는 해결책은 iframe을 1x1 픽셀로 만드는 것입니다. 그런 다음 div를 크기를 조정하여 충분히 크고 눈에 잘 띄게 만듭니다.

대신 iframe에 src = "about : blank"을 입력하십시오. div를 표시 한 후 src를 올바른 url로 동적으로 설정합니다. 이렇게하면 div가 표시되는 동안지도가 완전히로드됩니다. (사용자가지도를 열지 않아도 iframe 콘텐츠를로드하지 않아도 좋을 것입니다.)

Answer 2

Google지도 API를 사용하지 않는다고 말하면 다음과 같이 할 수 있습니다. :

랩지도 :

<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div> 

사용지도가 표시됩니다이 코드 (jQuery를 버전) :

$('#map-wrapper').html($('#map-wrapper').html()); 

자바 스크립트 버전 :

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML; 

지도가 표시되면 래퍼 (Google지도 iframe)의 콘텐츠가 다시 생성되어 다시로드됩니다.