jquery: ¿cómo puedo cargar la API de Google Maps a través de ajax?

Question

Antes de responder: ¡esto no es tan directo como cabría esperar!

• que tienen un 'mostrar en el mapa' botón, que cuando se hace clic se abre una caja de diálogo /caja de luz con el mapa de Google en .
• que no quieren cargar el API de Google Maps en pageload, justo cuando un mapa ha sido solicitó

Este es el archivo php "mostrar en el mapa" botón pone en el cuadro de diálogo:

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

que he estado tratando de cargar la API antes ajaxing en el diálogo como este:

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

esto no parece funcionar :(

También he intentado :

• añadiendo <script src="http://maps.google.com/maps/api/js?sensor=false"></script> al archivo ajax
• type = "text/javascript" correr $.getScript('http://maps.google.com/maps/api/js?sensor=false'); en doc.ready

el problema el navegador parece ser redirigido a un archivo api.js - ve una pantalla blanca

Answer 1

This FAQ answer detalla cómo cargar la API de Maps de forma asíncrona, y hay una buena example que va junto con ella.

Básicamente, recomendamos que coloque su código de ejecución en una función nombrada, luego cargue la API de Maps haciendo referencia a dicha devolución de llamada y utilizando el parámetro "async". O usted podría utilizar getJSON de jQuery como tal:

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

Answer 2

gracias por señalarme en la dirección correcta Andrew, mi problema era que la devolución de llamada en la solicitud de API es obligatoria para cargar el API bajo demanda.

Aquí es mi último código de 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') 
    }) 
}