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 googl

Answer 1

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

Answer 2

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