javascript - jquery: how can i load the Google Maps API via ajax?

Question

Before you reply: this is not as straight foward as you'd expect!

• I have a 'show on map' button which when clicked opens a dialogbox/lightbox with the google map in.
• I don't want to load the maps api on pageload, just when a map has been requested

This is php file the "show on map" button puts into the dialog box:

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

I've been trying to load the API before ajaxing in the dialog like this:

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

this doesn't seem to work :(

i've also tried:

• adding <script src="http://maps.google.com/maps/api/js?sensor=false"></script> to the ajax file
• type="text/javascript" running $.getScript('http://maps.google.com/maps/api/js?sensor=false'); on doc.ready

the problem the browser seems to be redirected to the api.js file - you see a white screen

Answer 1

This FAQ answer details how to load the Maps API asynchronously, and there is a good example that goes along with it.

Basically, recommend you put your execution code in a named function, then load the Maps API referencing said callback and using the "async" parameter. Or you could use jQuery's getJSON as such:

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