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

Question

在您回复之前：这并不像您期望的那样直截了当！

• 我有一个“在地图上显示”按钮 单击时打开一个 与谷歌的对话框/灯箱 地图。
• 我不想加载地图 API 页面加载，就在地图被加载的时候 请求

这是“在地图上显示”按钮放入对话框的 php 文件：

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

我一直在尝试在像这样的对话框中进行 ajaxing 之前加载 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
        })
    });
})

这似乎不起作用:(

我也试过了：

• 添加<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 到ajax文件
• type="text/javascript" 正在运行 $.getScript('http://maps.google.com/maps/api/js?sensor=false'); 在 doc.ready 上

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

Answer 1

This FAQ answer 详细说明了如何异步加载 Maps API，还有一个很好的 example 与之配套。

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

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

Answer 2

感谢 Andrew 为我指明了正确的方向，我的问题是 api 请求中的回调对于按需加载 api 是必需的。

这是我最终的 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')
    })
}