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>

我一直在尝试在对话框中使用ajax之前加载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
        })
    });
})

这好像没法工作 :(

我也尝试过:

• 在ajax文件中添加<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
• 在doc.ready上运行$.getScript('http://maps.google.com/maps/api/js?sensor=false');并将类型设置为"text/javascript"

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

- Haroldo

Answer 1

这个FAQ回答详细介绍了如何异步加载地图API，并提供了一个很好的示例。

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

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

- Andrew

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

- Haroldo

---

很好。或者你可以使用getJSON来最小化修改你的原始代码，就像我在我的更新答案中指出的那样。 - Andrew