jquery: comment charger l'API Google Maps via ajax?

Question

Avant de répondre: ce n'est pas aussi droit que vous attendez!

• J'ai un « afficher sur la carte » bouton qui quand on clique dessus ouvre une DialogBox/lightbox avec la carte Google dans.
• Je ne veux pas charger le api de cartes sur pageload, juste quand une carte a été demandé

C'est un fichier php sur le bouton « afficher sur la carte » met dans la boîte de dialogue:

<div id="map_canvas"></div> 

<script type="text/javascript"> 
    $(function() { 
      //google maps stuff    
      var latlng = new google.maps.LatLng(<?php echo $coords ?>); 
      var options = { 
       zoom: 14, 
       center: latlng, 
       mapTypeControl: false, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      };   
      var map = new google.maps.Map(document.getElementById('map_canvas'), options);   
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(<?php echo $coords ?>), 
       map: map 
      }); 
    }) 
</script> 

J'ai essayé de charger l'API avant ajaxing dans la boîte de dialogue comme celui-ci:

$('img.map').click(function(){  
    var rel = $(this).attr('rel'); 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false', function(){ 
     $.fn.colorbox({ 
      href:rel 
     }) 
    }); 
}) 

cela ne semble pas fonctionner :(

j'ai aussi essayé :

• ajouter <script src="http://maps.google.com/maps/api/js?sensor=false"></script> au fichier ajax
• type = "text/javascript" en cours d'exécution $.getScript('http://maps.google.com/maps/api/js?sensor=false'); sur doc.ready

le problème le navigateur semble être redirigé vers le fichier api.js - vous voyez un écran blanc

Answer 1

This FAQ answer explique comment charger l'API Maps de manière asynchrone, et il y a un bon example qui va avec.

Fondamentalement, vous recommandons de mettre votre code d'exécution dans une fonction nommée, puis charger l'API Maps référençant ledit rappel et en utilisant le paramètre "async". Ou vous pouvez utiliser getJSON jQuery en tant que tel:

$.getJSON('http://maps.google.com/maps/api/js?sensor=false&async=2&callback=?', function(){ 
    $.colorbox({ 
     href:rel 
    }) 
}); 

Answer 2

merci de me pointer dans la bonne direction Andrew, mon problème était que le rappel dans la demande de api est obligatoire pour le chargement du api sur demande.

Voici mon dernier code jquery:

//in doc.ready 
$('img.map').click(function(){  
    var rel = $(this).attr('rel');  
    $('body').data('map_href', rel).append('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=show_map"></script>'); 
}) 


function show_map(){ 
    $.fn.colorbox({ 
     href:$('body').data('map_href') 
    }) 
}