Google ist nicht definiert Fehler bei der Verwendung von geoxml3.js und ProjectedOverlay.js KMZ-Datei anzuzeigen

Question

Ich habe eine Website, die Google Maps API JavaScript verwendet, um eine Karte anzuzeigen. Ich verwende auch geoxml3 und ProjectedOverlay, um eine KMZ/KML-Datei auf der Karte anzuzeigen.

Meine Skripte:

<script async defer src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script> 
<script type="text/javascript" src="/js/geoXML/ZipFile.complete.js"></script> 
<script type="text/javascript" src="/js/geoXML/geoxml3.js"></script> 
<script type="text/javascript" src="/js/geoXML/ProjectedOverlay.js"></script> 
<script src="/js/app.js"></script> 

Wenn Laden der Seite die Fehler:

Uncaught ReferenceError: google is not defined at ProjectedOverlay.js

und

Uncaught ReferenceError: google is not defined at PROJECT_NAME:115

wird geworfen werden.

Linie 115 ist die folgende:

google.maps.event.addDomListener(window, 'load', initMap); 

aber sie sind nicht immer geworfen. Das passiert vielleicht einmal alle 10 mal, wenn ich die Seite lade.

Answer 1

Das Problem ist, dass das Google-Skript asynchron geladen wird. Für geoxml3.js und ProjectedOverlay.js muss das Google Maps-API vollständig verbunden und geladen sein, damit es funktioniert.

Bei asynchronem Laden wird eines der anderen JS-Skripts geladen, bevor das Google-API geladen wurde, wodurch ein Fehler ausgegeben wird.

Die einfache Lösung ist von dem Asynchron-defer in der Google API-Skript zu entfernen:

<script src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script> 

Answer 2

Ja, es passiert, wenn Sie Google verwenden, bevor es lädt. Es ist ein sehr häufiges Problem. Also machen Sie eine Rückruffunktion wie folgt:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 

<script> 
    function initMap() { 
     var mapDiv = document.getElementById('map'); 
     var map = new google.maps.Map(mapDiv, { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644) 
     }); 
     } 
</script>