jquery: how can i load the Google Maps API via ajax?
- by Haroldo
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
