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

admin管理员组

文章数量:1287536

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('', function(){
        $.fn.colorbox({
            href:rel
        })
    });
})

this doesn't seem to work :(

i've also tried:

• adding <script src=""></script> to the ajax file
• type="text/javascript" running $.getScript(''); on doc.ready

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

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./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./maps/api/js?sensor=false"></script> to the ajax file
• type="text/javascript" running $.getScript('http://maps.google./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

• javascript
• jquery
• google-maps

Share Improve this question Follow asked May 11, 2010 at 14:59 HaroldoHaroldo 37.4k4747 gold badges130130 silver badges169169 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

Basically, remend 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./maps/api/js?sensor=false&async=2&callback=?', function(){
    $.colorbox({
        href:rel
    })
});

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./maps/api/js?sensor=false&callback=show_map"></script>');
})


function show_map(){
    $.fn.colorbox({
        href:$('body').data('map_href')
    })
}

本文标签： javascriptjquery how can i load the Google Maps API via ajaxStack Overflow