Google지도 위에 div

Question

안녕하세요! 다음과 같은 문제가 있습니다 : 웹 페이지 (컨테이너)의 주 정보와 Google지도가 포함 된 div가있는 div가 있습니다. 사용자가 div를 클릭하면 Google지도가 컨테이너 상단에 표시됩니다 (웹 페이지를 숨김). div를 클릭하면 내가 얻은 모든 것이 아래 이미지에 묘사됩니다. http://prntscr.com/38ytlb 지도가 화면 (Google 왼쪽 하단의 로고와 오른쪽 하단의 이용 약관)에 올바르게 표시됩니다. 그러나지도는 뷰포트의 일부만 차지합니다.

<div id="container"> 
... 
</div> 
<div id="map-container"> 
    <div id="map-canvas"></div> 
</div> 

#map-container { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 5; 
} 

#map-canvas { 
    height: 100%; 
    width: 100%; 
} 

$(document).ready(function() { 
    $("#map-container").hide(); 

    $("#map-toggle").click(function() { 
     $("#container").hide(); 
     $("#map-container").show(); 
    }); 
}); 

미리 감사드립니다.

Answer 1

당신은 두 가지

지도 사업부는 적당한 크기 당신이 그것을 보여 후지도의 크기를 조정 트리거

에게 있음을

1. 을 확인해야합니다. 그러면지도가 다시 그려지고 div를 채우도록 크기가 수정됩니다.

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

   map 당신이지도 객체를 구글라는 이름의 어떤이다 :

그것은이 같은해야한다. 사이트의 모든 샘플에는 map이라는 이름이 지정됩니다.

이 갈 것 직후 : 이미지에서

$("#map-container").show();