Antes de responder: isso não é tão direto quanto você esperaria!

Eu tenho um botão "mostrar no mapa" que, quando clicado, abre uma caixa de diálogo / caixa de luz com o mapa do Google.Não quero carregar a API do mapa no carregamento de página, apenas quando um mapa foi solicitado

Este é um arquivo php que o botão "mostrar no mapa" coloca na caixa 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>

Eu tenho tentado carregar a API antes de ajaxing na caixa de diálogo como esta:

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

isso não parece funcionar :(

Eu também tentei:

adicionando<script src="http://maps.google.com/maps/api/js?sensor=false"></script> para o arquivo ajaxtype = "text / javascript" em execução$.getScript('http://maps.google.com/maps/api/js?sensor=false'); no doc.ready

o problema o navegador parece ter sido redirecionado para o arquivo api.js - você vê uma tela branca