Chargement dynamique de l'API de Google Maps

Question

En essayant de charger dynamiquement les API de google maps. J'utilise le code suivant:

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

mais en essayant de créer la carte

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

ou

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

Je reçois une erreur que Google (ou GMap2) est indéfini.

Answer 1

Assurez-vous de ne pas instancier la carte avant la fin du chargement du Javascript.

Aussi, si vous souhaitez utiliser le chargeur API AJAX, vous devez le faire comme ceci:

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

Sinon, il suffit d'utiliser la source régulière de script API Maps:

<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 l'ai fait comme si ... cet exemple utilise jQuery et 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

Vous pouvez le faire. Vous pouvez ajouter un nom de fonction de rappel dans l'URL. Il sera appelé lorsque l'API sera chargée. Cette fonction de rappel doit être accessible dans la portée du document.

Je l'ai fait il y a quelque temps par le déclenchement d'un événement personnalisé sur la fenêtre avec jQuery: http://jsfiddle.net/fZqqW/5/

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

Asynchrone Chargement de l'API

Vous voudrez peut-être pour charger le code JavaScript de l'API Google Maps après le chargement de votre page, , ou à la demande. Pour ce faire, vous pouvez injecter votre propre balise en réponse à un événement window.onload ou un appel de fonction, mais vous devez également indiquer à l'API Maps JavaScript d'amorcer l'exécution de votre code d'application jusqu'à ce que l'API JavaScript Maps le code est entièrement chargé. Vous pouvez le faire en utilisant le paramètre de rappel , qui prend comme argument la fonction à exécuter après pour terminer le chargement de l'API. Le code suivant indique à l'application de charger l'API Maps après le chargement complet de la page (à l'aide de window.onload) et d'écrire l'API JavaScript Maps dans un tag dans la page. De plus, CHARGENT l'API ne veut exécuter l'initialisation() fonction après l'API a complètement chargé en passant callback = initialize aux cartes

Voir ICI: https://developers.google.com/maps/documentation/javascript/tutorial