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

瀏覽器似乎被重定向到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
    })
});

Answer 2

謝謝你指出我正確的方向安德魯，我的問題是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')
    })
}