Async Google Maps API v3 undefined ist keine Funktion

Question

Ich schreibe eine App, die Google Maps asynchron mit einem von Hand erstellten Framework lädt.
Wenn ich Karten lade, wird es aus irgendeinem Grund nicht geladen und ich werde mit einem Uncaught TypeError: undefined is not a function enden. Ich habe den Chrom-Inspektor überprüft und herausgefunden, dass google.maps ein gültiges Objekt ist, aber es hat keine eigenen Eigenschaften. Ich rufe manuell die "Initialisierungsfunktion" auf, nachdem das Dokument geladen wurde. Was mache ich falsch?!

Answer 1

Sie können die Karten-API asynchron mit der bekannten URL laden (http://maps.googleapis.com/maps/api/js?v=3&sensor=false)

Wenn Sie einen Blick auf die Skript-Datei nehmen, werden Sie sehen, dass dies nicht der API ist, dass wird geladen, es ist ein Loader, der die API lädt. Der Lader verwendet document.write(), was zu unerwarteten Ergebnissen führt, wenn er nach dem Laden des Dokuments aufgerufen wird.

Außerdem wartet das Onload-Ereignis des Dokuments nicht auf asynchrone geladene Objekte, es kann zu schnell kommen.

Sie können auch nicht das load-event des Skripts verwenden, um die initialize-Funktion aufzurufen, da beim Laden der Loader geladen wird, nicht die maps-API.

Was ist zu tun:
einen Rückruf-Parameter an das Skript-URL anhängen (mit dem Namen der initialize-Funktion als Wert)

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

Sie jetzt einen anderen Lader erhalten die :

1. verwendet nicht document.write()
2. den Rückruf-functi ruft auf (initialisieren), wenn die Karten-API

Demo geladen ist: http://jsfiddle.net/doktormolle/7cu2F/

---

Im Zusammenhang mit dem Kommentar: scheint der Rückruf sein muss, eine Funktion an Fenstern direkt. nicht cool google :)

Es gibt eine andere Option, the google-API-loader, die die Verwendung von Funktionsreferenzen (anstelle von Funktionsnamen) unterstützt.

Probe, die das Karten-API asynchron geladen, aber nur, wenn es ein Element mit der ID map-canvas in dem Dokument, und erstellt dann eine Karte:

window.addEventListener('load',function(){ 
 
     if(document.getElementById('map-canvas')){ 
 
     google.load("maps", "3",{ 
 
      callback:function(){ 
 
      new google.maps.Map(document.getElementById('map-canvas'), { 
 
       center: new google.maps.LatLng(0,0), 
 
       zoom: 3 
 
       }); 
 
      } 
 
     });  
 
     } 
 
    },false);

 body,html,#map-canvas{ 
 
     height:100%; 
 
     margin:0; 
 
     padding:0; 
 
     width:100%; 
 
     }

<script src="https://www.google.com/jsapi?.js"></script> 
 
<div id="map-canvas"></div>