jquery：我如何通过ajax加载Google Maps API？

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
我不想在页面加载时加载地图api，就在请求地图时

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

这是php文件“show on map”按钮放入对话框：

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

我一直在尝试在对话框中加载API之前加载API，如下所示：

$('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
type =“text / javascript”运行$ .getScript（'http://maps.google.com/maps/api/js?sensor=false'）;在doc.ready上

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

浏览器似乎被重定向到api.js文件的问题 - 你看到一个白色的屏幕

2 个解决方案

#1

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

此FAQ答案详细说明了如何异步加载Maps API，并且有一个很好的例子。

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:

基本上，建议您将执行代码放在命名函数中，然后加载引用所述回调并使用“async”参数的Maps API。或者您可以使用jQuery的getJSON：

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

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

谢谢你指出我正确的方向安德鲁，我的问题是api请求中的回调是强制性的加载api按需。

Here is my final jquery code:

这是我最后的jquery代码：

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

#1