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文件
• 類型= 「文/ 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

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