Impossible de charger dynamiquement google map javascript

Question

Le message suivant indique que GMap2 n'est pas défini. Mais le code qui utilise GMap2 est dans le rappel.

 $(function() { 
     $('#sample').click(function() { 
      $.getScript("http://maps.google.com/maps?file=api&v=2&sensor=true&key=API_KEY_HERE", function() { 
       var map = new GMap2(document.getElementById("mapTest")); 
       map.setCenter(new GLatLng(18, -77.4), 13); 
       map.setUIToDefault(); 

      }); 
     }); 
    }); 

<a id="sample">Click Me</a> 
<div id="mapTest" style="width: 200px; height: 100px;"></div> 

Answer 1

Vous pouvez aller de deux façons avec ceci:

1. Continuer à utiliser $.getScript:

Il semble que vous avez besoin à la fois d'un paramètre async=2 ainsi que d'une structure de rappel différente pour que cela fonctionne. Ma réponse est adaptée à votre code à partir de cette great walkthrough here.

<script type="text/javascript"> 
    function map_callback(){ 
     var map = new GMap2(document.getElementById("mapTest")); 
     map.setCenter(new GLatLng(18, -77.4), 13); 
     map.setUIToDefault(); 
    } 

    $(function(){ 
     $('#sample').click(function(){ 
      $.getScript("http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;callback=map_callback&amp;async=2&amp;key=API_KEY_HERE"); 
     } 
    } 
</script> 

2. Utilisez le chargeur Google AJAX

Puisque vous utilisez déjà une bibliothèque Google, pourquoi ne pas use their loader pour vous aider:

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

    google.setOnLoadCallback(function(){ 
     $('#sample').click(function(){ 
      google.load("maps", "2", {"callback" : function(){ 
      var map = new GMap2(document.getElementById("mapTest")); 
      map.setCenter(new GLatLng(18, -77.4), 13); 
      map.setUIToDefault(); 
      } }); 
     } 
    }, true); // Passing true, though undocumented, is supposed to work like jQuery DOM ready 
</script> 

Answer 2

Avez-vous vérifié si le navigateur est compatible? Je le fais dans toutes mes applications GMAP, même si elle manque rarement ...

if (GBrowserIsCompatible())