Google지도 아코디언 패널을 확장하면 데이터가 표시되지 않습니다.

Question

내 웹 페이지에서 내 탐색 패널을 확장하면 Google지도에 아무 것도 표시되지 않고 회색으로 표시됩니다. 콘솔을 열 때만지도가 나타납니다. 마커 및 내가 프로그래밍 할 위치가 표시된지도가 내 코드로 변경하려면 어떻게해야합니까? 패널 외부에지도를 배치하면 완벽하게 작동합니다. 누군가가 코드를 확장 할 수 있다면 내가 도움이되도록 작성했습니다.

HTML 코드 :

<button class="accordion">Navigation</button> 
     <div class="panel"> 
      <div id="map" style="width:60%;height:300px"></div> 

      </div> 

CSS Code: 
button.accordion { 
      background-color: #eee; 
      color: #444; 
      cursor: pointer; 
      padding: 18px; 
      width: 100%; 
      border: none; 
      text-align: left; 
      outline: none; 
      font-size: 15px; 
      transition: 0.4s; 
     } 

     button.accordion.active, button.accordion:hover { 
      background-color: #ddd; 
     } 

     div.panel { 
      padding: 0 18px; 
      display: none; 
      background-color: white; 
     } 

     div.panel.show { 
      display: block; 
     } 

스크립트 코드 : 첫 번째 스크립트 블록에 대한

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

귀하의 코드 :

<script> 
     var acc = document.getElementsByClassName("accordion"); 
     var i; 

     for (i = 0; i < acc.length; i++) { 
      acc[i].onclick = function(){ 
       this.classList.toggle("active"); 
       this.nextElementSibling.classList.toggle("show"); 
      } 
     } 
    </script> 


    <script> 
     function myMap() { 
      var mapCanvas = document.getElementById("map"); 
      var myCenter = new google.maps.LatLng(51.508742,-0.120850); 
      var mapOptions = {center: myCenter, zoom: 15}; 
      var map = new google.maps.Map(mapCanvas,mapOptions); 
      var marker = new google.maps.Marker({ 
       position: myCenter, 
       icon: "poi.png" 
      }); 
      marker.setMap(map); 
     } 


     </script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB37us778WYnwNjHftUm3oL2oduV_WOt_E&callback=myMap"></script> 

Answer 1

귀하의 아코디언 쇼 핸들러는 맵 크기 조정을 실행하는 데 필요 다음과 같습니다.

<script> 
    var acc = document.getElementsByClassName("accordion"); 
    var i; 

    for (i = 0; i < acc.length; i++) { 
     acc[i].onclick = function(){ 
      this.classList.toggle("active"); 
      this.nextElementSibling.classList.toggle("show"); 
      google.maps.event.trigger(map, "resize"); //added 
     } 
    } 
</script> 

작동 방식 : https://jsfiddle.net/vv0xtbrw/ (14 행 참조);