Google Maps-API funktioniert nicht, Karte wird nur angezeigt, nachdem ich die Größe der Seite geändert oder aktualisiert habe?

Question

Ich habe andere ähnliche Themen angeschaut und ich habe stundenlang versucht, dieses Problem zu beheben.

Das resize-Ereignis funktioniert nicht für mich.

Grundsätzlich wird nur eine graue Box geladen, erst wenn ich den Browser aktualisiere oder die Größe verändere, lädt die Karte dann vollständig.

Der Code I bin mit unten für die Karten gegeben:

<script> 
    function initMap() { 

     var center1 = { 
      lat: 51.258426, 
      lng: -1.361344 
     }; 
     var londoneye = { 
      lat: 51.503331, 
      lng: -0.119543 
     }; 
     var bigben = { 
      lat: 51.500726, 
      lng: -0.124629 
     }; 
     var tower = { 
      lat: 51.508139, 
      lng: -0.075939 
     }; 
     var ss = { 
      lat: 51.449164, 
      lng: -2.608417 
     }; 
     var windsor = { 
      lat: 51.483907, 
      lng: -0.604435 
     }; 
     var stone = { 
      lat: 51.178895, 
      lng: -1.826215 
     }; 
     var map = new google.maps.Map(document.getElementById("map"), { 
      zoom: 8, 
      center: center1 
     }); 

     var map1 = new google.maps.Map(document.getElementById('map1'), { 
      zoom: 14, 
      center: londoneye 
     }); 

     var map2 = new google.maps.Map(document.getElementById('map2'), { 
      zoom: 14, 
      center: bigben 
     }); 

     var map3 = new google.maps.Map(document.getElementById('map3'), { 
      zoom: 14, 
      center: tower 
     }); 

     var map4 = new google.maps.Map(document.getElementById('map4'), { 
      zoom: 14, 
      center: ss 
     }); 

     var map5 = new google.maps.Map(document.getElementById('map5'), { 
      zoom: 14, 
      center: windsor 
     }); 

     var map6 = new google.maps.Map(document.getElementById('map6'), { 
      zoom: 14, 
      center: stone 
     }); 

     var boundary = new google.maps.Map(document.getElementById('boundary'), { 
      zoom: 8, 
      center: center1 
     }); 


     var cityCircle = new google.maps.Circle({ 
      strokeColor: '#000000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.1, 
      map: boundary, 
      center: center1, 
      radius: 100000 
     }); 


     var marker1 = new google.maps.Marker({ 
      position: londoneye, 
      map: map 


     }); 



     var marker12 = new google.maps.Marker({ 
      position: londoneye, 
      map: map1 


     }); 

     var marker2 = new google.maps.Marker({ 
      position: bigben, 
      map: map 
     }); 

     var marker22 = new google.maps.Marker({ 
      position: bigben, 
      map: map2 
     }); 



     var marker3 = new google.maps.Marker({ 
      position: tower, 
      map: map 
     }); 

     var marker32 = new google.maps.Marker({ 
      position: tower, 
      map: map3 
     }); 




     var marker4 = new google.maps.Marker({ 
      position: ss, 
      map: map 
     }); 

     var marker42 = new google.maps.Marker({ 
      position: ss, 
      map: map4 
     }); 




     var marker5 = new google.maps.Marker({ 
      position: windsor, 
      map: map 

     }); 

     var marker52 = new google.maps.Marker({ 
      position: windsor, 
      map: map5 

     }); 




     var marker6 = new google.maps.Marker({ 
      position: stone, 
      map: map 
     }); 

     var marker62 = new google.maps.Marker({ 
      position: stone, 
      map: map6 
     }); 




     var marker1content = '<b><font color="black">London Eye</font></b>' 
     var marker2content = '<b><font color="black">Big Ben</font></b>' 
     var marker3content = '<b><font color="black">Tower of London</font></b>' 
     var marker4content = '<b><font color="black">SS Great Brtain</font></b>' 
     var marker5content = '<b><font color="black">Windsor Castle</font></b>' 
     var marker6content = '<b><font color="black">Stonehenge</font></b>' 

     var infowindow1 = new google.maps.InfoWindow({ 
      content: marker1content 
     }); 

     var infowindow2 = new google.maps.InfoWindow({ 
      content: marker2content 
     }); 
     var infowindow3 = new google.maps.InfoWindow({ 
      content: marker3content 
     }); 
     var infowindow4 = new google.maps.InfoWindow({ 
      content: marker4content 
     }); 
     var infowindow5 = new google.maps.InfoWindow({ 
      content: marker5content 
     }); 
     var infowindow6 = new google.maps.InfoWindow({ 
      content: marker6content 
     }); 


     marker1.addListener('click', function() { 
      infowindow1.open(map, marker1); 
     }); 
     marker2.addListener('click', function() { 
      infowindow2.open(map, marker2); 
     }); 
     marker3.addListener('click', function() { 
      infowindow3.open(map, marker3); 
     }); 
     marker4.addListener('click', function() { 
      infowindow4.open(map, marker4); 
     }); 
     marker5.addListener('click', function() { 
      infowindow5.open(map, marker5); 
     }); 
     marker6.addListener('click', function() { 
      infowindow6.open(map, marker6); 
     }); 


    } 
</script> 

Ich habe an der Browser-Konsole angesehen und es gibt keine Fehler.

Wie ich bereits sagte, habe ich auch die Größenänderungsfunktion versucht, wie von allen anderen ähnlichen Threads erwähnt.

Kann mir bitte jemand helfen?

Edit: Ich habe auch die CSS unten wie pro Anfrage hinzugefügt, jede ID entspricht dann einem div.

#map { 
     height: 400px; 
     width: 100%; 


      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map1{ 

     height: 400px; 
     width: 100%; 

      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map2{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 
     #map3{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map4{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
     } 

    #map5{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

    #map6{ 
     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

    #boundary{ 

     height: 400px; 
     width: 100%; 
      margin: 0 auto; 
      margin-top: 10%; 
      } 

Answer 1

Ich nahm Ihr Javascript und CSS; benutzte meinen eigenen API-Schlüssel und HTML-Layout und alle Karten geladen gut. Ich würde empfehlen, dass Sie ein alert/console.log in Ihre initMap-Funktion einfügen, um zu überprüfen, ob Sie in diesen Funktionsaufruf gelangen.

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<style type="text/css"> 
    /*Your CSS Here*/ 
    /*#map { 

    } 
    ...*/ 
</style> 
<script type="text/javascript"> 
    //initMap function Here 
    //function initMap() { 
    // //Code 
    //} 
</script> 
<script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=[API-Key-No-Brackets]&callback=initMap"> //Add Your API Key 
</script> 

</head> 
<body> 
<div id="map"></div> 
<div id="map1"></div> 
<div id="map2"></div> 
<div id="map3"></div> 
<div id="map4"></div> 
<div id="map5"></div> 
<div id="map6"></div> 
<div id="boundary"></div> 
</body> 
</html> 

Answer 2

Getestet habe ich diese Art und Weise zu viel, und ich fand heraus, dass es auf einem anderen Skript abhängt, die die Karte Rendering sowie andere Renderings stoppen.

Es ist wahrscheinlich ein Skript, das die window.resize Methode und das Problem löst verwendet, wenn Sie den benutzerdefinierten Resize-Skript entfernen (zB: Bootstrap oder Skript js Thema Resize)

Die temporäre Lösung, die ich gefunden ein Feuer ist window resize Sobald die Karte geladen wurde, etwas wie: