2016-11-05 1 views
-2

Wenn ich mein Navigationsfenster auf meiner Webseite erweitere, wird die Google Map mit nichts angezeigt, sie erscheint nur grau. Nur wenn ich die Konsole öffne, erscheint die Karte. Was muss ich in meinen Code ändern, damit die Karte mit ihrem Marker und dem Ort, an den ich sie programmiert habe, angezeigt wird? Wenn Sie die Karte außerhalb des Panels platzieren, funktioniert sie perfekt. Wenn jemand vielleicht den Code erweitern könnte, den ich geschrieben habe, um zu helfen, wäre das großartig.Google Kartendaten werden nicht angezeigt, wenn ich das Akkordeonbedienfeld erweitere

HTML-Code:

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

Script-Code:

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

Ziehen Sie in Betracht, Ihren API-Schlüssel aus der URL in Ihrem Code zu entfernen. – BluePill

Antwort

1

Ihre Akkordeon Show-Handler muss nur eine Karte Resize auslösen:

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

Ihren Code für den ersten Skriptblock wird:

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

Arbeitsgeige: https://jsfiddle.net/vv0xtbrw/ (Siehe Zeile 14);

+0

Erstaunlich vielen Dank. Gibt es auch irgendeinen Grund, warum, wenn ich die Karte lade, zeigt es die Karte weg von der tatsächlichen Markierung anstatt weg von oben weg davon? – DrComputerScience

Verwandte Themen