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

这似乎不起作用:(

我也尝试过:

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

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

Answer 1

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

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

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