2009-09-09 16 views
6

Ich versuche, die Google Maps APIs dynamisch zu laden. Ich verwende den folgenden Code:Dynamisch Laden von Google Maps api

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>; 
head.appendChild(script); 

aber wenn die Karte

map = new GMap2(document.getElementById("map")); 

oder

map = new google.maps.Map2(document.getElementById("map")); 

Ich erhalte eine Fehlermeldung zu erstellen versuchen, dass Google (oder GMap2) ist nicht definiert.

+0

Hallo Chris, ich hatte genau das gleiche Problem, hast du irgendeine Lösung? – iwan

+0

Haben Sie eine Antwort gefunden, die Ihren Bedürfnissen entspricht? –

Antwort

5

Stellen Sie sicher, dass Sie die Map nicht vor dem Laden des Javascript instanziieren.

auch, wenn Sie die AJAX API-Loader verwenden möchten, müssen Sie es wie dies zu tun:

<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("maps", "2.x"); 

    // Call this function when the page has been loaded 
    function initialize() { 
     var map = new google.maps.Map2(document.getElementById("map")); 
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); 
    } 
    google.setOnLoadCallback(initialize); 
</script> 

Andernfalls verwenden Sie nur die reguläre Maps API-Skript Quelle:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script> 
3

I Habe es so gemacht ... dieses Beispiel benutzt jQuery und google map v3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function() {}); 

function MapApiLoaded() { 
    //.... put your map setup code here: new google.maps.Map(...) etc 
} 
7

Du kannst das machen. Sie können einen Callback-Funktionsnamen in der URL hinzufügen. Es wird aufgerufen, wenn die API geladen wird. Auf diese Callback-Funktion muss im Dokumentbereich zugegriffen werden können.

tat ich, dass vor einiger Zeit ein benutzerdefiniertes Ereignis auf dem Fenster mit jQuery durch Auslösen: http://jsfiddle.net/fZqqW/5/

verwendet "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"

window.gMapsCallback = function(){ 
    $(window).trigger('gMapsLoaded'); 
} 

$(document).ready((function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    function loadGoogleMaps(){ 
     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    loadGoogleMaps(); 
})());​ 

Asynchronously die API Laden

Sie können möchten Laden des Google Maps-API-JavaScript-Codes, nachdem Ihre Seite fertig geladen hat, oder bei Bedarf. Um dies zu tun, können Sie Ihr eigenes -Tag als Reaktion auf ein window.onload-Ereignis oder einen Funktionsaufruf injizieren, aber Sie müssen zusätzlich die JavaScript-API von Google Maps anweisen, die Ausführung Ihres Anwendungscodes bis zur JavaScript-API Google Maps zu verzögern Code ist voll geladen. Dazu können Sie den Parameter des Rückrufs verwenden, der als Argument die Funktion zum Ausführen des Ladens der API nach übernimmt.

Der folgende Code weist die Anwendung an, die Google Maps-API nach dem vollständigen Laden der Seite (mit window.onload) zu laden und die JavaScript-API in ein Tag auf der Seite zu schreiben. Zusätzlich anweisen wir die API, um nur die initialize() Funktion ausführen, nachdem die API vollständig, indem Callback geladen ist = initialisieren, um die Karten

Siehe hier: https://developers.google.com/maps/documentation/javascript/tutorial