Caricamento dinamico di Google Maps API

Question

Sto cercando di caricare le API di Google Maps in modo dinamico. Sto utilizzando il seguente codice:

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); 

ma quando si cerca di creare la mappa

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

o

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

Ricevo un errore che Google (o GMap2) è indefinito.

Answer 1

Assicurarsi di non creare un'istanza della mappa prima del caricamento di Javascript.

Inoltre, se si desidera utilizzare l'API loader AJAX, è necessario fare in questo modo:

<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> 

In caso contrario, basta usare la normale fonte Maps API per gli script:

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

Answer 2

I 'Ho fatto in questo modo ... questo esempio utilizza jQuery e 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 
} 

Answer 3

si può fare questo. È possibile aggiungere un nome di funzione di callback nell'URL. Verrà chiamato quando viene caricata l'API. Tale funzione di callback deve essere accessibile nell'ambito del documento.

ho fatto qualche tempo fa innescando un evento personalizzato sulla finestra con jQuery: http://jsfiddle.net/fZqqW/5/

utilizzato "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(); 
})());​ 

in modo asincrono Caricamento l'API

Si potrebbe desiderare per caricare il codice JavaScript dell'API di Maps dopo che la pagina ha terminato il caricamento o su richiesta. Per fare ciò, è possibile inserire il proprio tag in risposta a un evento window.onload o una chiamata di funzione, ma è necessario inoltre istruire il bootstrap API JavaScript Maps per ritardare l'esecuzione del codice dell'applicazione fino all'API JavaScript di Maps. il codice è completamente caricato. È possibile farlo utilizzando il parametro callback , che accetta come argomento la funzione da eseguire su completando il caricamento dell'API.

Il codice seguente istruisce l'applicazione per caricare API le mappe dopo che la pagina è completamente caricata (utilizzando window.onload) e scrivere il mappe API JavaScript in un tag all'interno della pagina. Inoltre, Raccomandiamo al API per eseguire solo la funzione di inizializzazione() dopo l'API è completamente caricato passando callback = inizializzare le mappe

vedere qui: https://developers.google.com/maps/documentation/javascript/tutorial