TypeError: window.initMap ist keine Funktion

Tatsächlich wird der Fehler von der initMap im API-Skript von Google generiert

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

wenn also die Google Map API geladen ist, wird die initMap-Funktion ausgeführt. Wenn Sie keine initMap-Funktion haben, wird mit der initMap kein Funktionsfehler generiert.

Im Grunde haben Sie also eine der folgenden Möglichkeiten:

1. eine initMap-Funktion erstellen
2. ersetzen Sie die Callback-Funktion durch eine eigene, die für denselben Zweck erstellt wurde, sie jedoch etwas anderes benennt
3. ersetzen Sie &callback=angular.noop, wenn Sie nur eine leere Funktion () wünschen (nur wenn Sie eckig verwenden).

Meine Erklärung für dieses Problem:

Der .....&callback=initMap" async defer></script> bewirkt, dass das Skript asynchron lädt (parallel zu DOM) und nach dem Laden die initMap-Funktion ausführt.ACHTUNG: initMap () im globalen Gültigkeitsbereich!Wir können unser initMap () after google-Skript nicht deklarieren, da es bereits zum Zeitpunkt des Abschlusses async load sein sollte. Wir können unser Skript vorher dies nicht laden, weil wir die Google-Funktion benötigen, um unsere auszuführen. Das ist wie ein Teufelskreis.

Drei Lösungen:

Erstes und schlechtestes: Google Script wird synchron geladen

1. async defer entfernen
2. &callback=initMap im src-Attribut entfernen
3. fügen Sie <script-Tag mit Ihrem Code nach dem Skript von Google ein

2'nd und am besten: mach das einfach =)

1. .....&callback=initMap" async defer></script> so belassen, wie es ist
2. und fügen Sie das <script-Tag von google nach Ihrem Skript ein

3. schreibe in dein Skript 

   function initMap() {} // now it IS a function and it is in global
   
   $(() => {
     initMap = function() {
       // your code like...
       var map = new google.maps.Map(document.getElementById('map'), {/*your code*/});
       // and other stuff...
     }
   })
   

   dies ermöglicht Ihnen Laden Googles Skript async und Ausführen Ihr gleich danach 

3'rd und seltsam: es wird funktionieren ... einige Male =)

3. machen Sie dasselbe, aber schreiben Sie einfach im globalen Bereich

   function initMap() {
     // your code
   }
   

   und wenn Sie es im globalen Gültigkeitsbereich schreiben, funktioniert dies unabhängig davon, was welcher Code schneller geladen wird, Ihr (Sync) oder Google (Async). Öfter gewinnt Ihr

Ich habe seit einigen Tagen mit dieser sehr populären Ausgabe zu kämpfen - "initMap ist keine Funktion".

Diese zwei Threads haben mir geholfen:

1. So rufen Sie Google Maps init in separaten Dateien einer Webanwendung ab

2. Verschiebungsattribut funktioniert nicht mit Google Maps API?

Warum öffnet sich die Karte manchmal und manchmal nicht? Dies hängt von verschiedenen Faktoren wie Verbindungsgeschwindigkeit, Umgebung usw. ab. Da die Initialisierungsfunktion manchmal ausgeführt wird, nachdem die Google Maps API aktiviert wurde, wird die Karte nicht angezeigt und die Browserkonsole gibt einen Fehler aus. Wenn ich nur das async-Attribut entferne, wurde das Problem behoben. Das Attribut verzögert sich.

Wenn async vorhanden ist: Das Skript wird asynchron mit dem Rest der Seite ausgeführt (das Skript wird ausgeführt, während die Seite die Analyse fortsetzt.) Wenn async nicht vorhanden ist und defer vorhanden ist: Das Skript wird ausgeführt, wenn die Seite vorhanden ist parsen beendet. Wenn weder async noch defer vorhanden ist: Das Skript wird sofort abgerufen und ausgeführt, bevor der Browser die Seite weiter analysiert Source - http://www.w3schools.com/tags/att_script_defer.asp

Hoffentlich hilft das. Prost.

Das Entfernen von =initMap hat für mich funktioniert:

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

Das Problem hat mit dem async-Attribut im Skripttag zu tun. Die Callback-Funktion versucht, "initMap ()" aufzurufen, wenn sie bis zum Abschluss der Anforderung nicht wirklich vorhanden ist.

Um dieses Problem zu lösen, habe ich das Goole Maps Api Script unterhalb des Skripts eingefügt, in dem meine initMap-Funktion deklariert wurde.

Hoffe das hilft

Dies kann jedoch für den Fall naheliegend erscheinen: Wenn jemand den JS-Code in $ (document) .ready eingefügt hat:

     $(document).ready(function() {
       ... Google Maps JS code ...
      }

Dann ist dies das Problem, da mit asyncdefer beim Laden der Google Maps API-Bibliothek asynchron geladen wird. Wenn das Laden abgeschlossen ist, wird nach der Callback-Funktion gesucht, die bis dahin verfügbar sein muss.

Sie müssen also nur den Code außerhalb von $ (document) .ready und: 

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

ganz unten, also lädt deine Seite SCHNELL :-)

Durch Hinzufügen gelöst 

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=XXXXXXX&callback=initMap">
    <!--
        https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
    -->
</script>

Am Anfang der gleichen Datei, die den restlichen Code mit function initMap() enthält. Es ist definitiv nicht die beste Lösung, aber es funktioniert.

Aber ich denke, wenn Sie function initMap() in etwas wie var=initMap() umwandeln und dann $(function () ..., würde es auch funktionieren.

Ich verwende React und hatte im Skript & callback = initMap wie folgt erwähnt 

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

dann wird nur der &callback=initMap-Teil entfernt. Es liegt kein Fehler vor, da window.initMap keine Funktion in der Konsole ist.

Erstellen Sie eine initMap-Methode zwischen dem "" -Tag oder laden Sie die Javascript-Datei, bevor Sie Google API aufrufen.

<script src="Scripts/main.js"></script>

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

Fügen Sie dies in Ihren HTML-Körper ein (der offiziellen Website von angle.js entnommen):

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

Ich glaube, dass Sie einige ältere angle.js-Dateien verwendet haben, da Sie in plunker keine Probleme haben und daher der angegebene Fehler angezeigt wurde.

ihre Rückrufmethode ist wahrscheinlich nicht global zugänglich. In meinem Fall hatte ich transponierte ES6-Codes über das Webpack verwendet, was dazu führte, dass meine Callback-Methode nicht mehr global war.

Versuchen Sie, Ihre Callback-Methode explizit an window wie unmittelbar nach der Callback-Methodendeklaration anzuhängen, und sehen Sie das Ergebnis 

window.initMap = initMap;

es hat für mich funktioniert.

Zusätzlich zu @ DB.Nulls Antwort habe ich Function.prototype als No-Op (No-Operation) -Funktion auf # 3 anstelle von angular.noop verwendet (ich habe kein eckiges Projekt in meinem Projekt).

Also das...

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=Function.prototype" type="text/javascript"></script>

In meinem Fall gab es früher ein Formatierungsproblem, daher war der Fehler eine Folge von etwas anderem. Mein Server rendert die Lat/Lon-Werte aufgrund von regionalen Einstellungen mit Kommas anstelle von Punkten.

Möglicherweise befindet sich Ihre initMap-Funktion in einer $ (document) .ready-Funktion. Wenn dies der Fall ist, funktioniert es nicht, es muss sich außerhalb der anderen Funktionen befinden.

Ich hatte einen ähnlichen Fehler. Die Antworten hier halfen mir herauszufinden, was zu tun ist.

index.html

 <!--The div element for the map -->
 <div id="map"></div>

<!--The link to external javascript file that has initMap() function-->
 <script src="main.js">

<!--Google api, this calls initMap() function-->
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYWY&callback=initMap">
</script>

main.js // Das gibt einen Fehler

// The initMap function has not been executed
const initMap = () => {
const mapDisplayElement = document.getElementById('map');
  // The address is Uluru
const address = {lat: -25.344, lng: 131.036};
  // The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
const marker = new google.maps.Marker({ position: address, map });
};

Die Antworten hier haben mir geholfen, eine Lösung zu finden. Ich habe eine sofort aufgerufene Funktion ( IIFE ) verwendet, um das Problem zu umgehen.

Der Fehler ist, dass zum Zeitpunkt des Aufrufs der Google Maps API die Funktion initMap () nicht ausgeführt wurde.

main.js // Das funktioniert

const mapDisplayElement = document.getElementById('map');
// The address is Uluru
// Run the initMap() function imidiately, 
(initMap = () => {
  const address = {lat: -25.344, lng: 131.036};
  // The zoom property specifies the zoom level for the map. Zoom: 0 is the lowest zoom,and displays the entire earth.
  const map = new google.maps.Map(mapDisplayElement, { zoom: 4, center: address });
  const marker = new google.maps.Marker({ position: address, map });
})();