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

Solution 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
    })
});

Solution 2

thanks for pointing me in the right direction Andrew, my problem was that the callback in the api request is mandatory for loading the api on demand.

Here is my final jquery code:

//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')
    })
}

Comments

[Andrew]

Cool. Or you could have minimally modified your original code using getJSON, as I indicated in my updated answer.