jquery: làm thế nào tôi có thể tải API Google Maps qua ajax?

Question

Trước khi bạn trả lời: đây không phải là con chim thẳng như bạn mong đợi!

• Tôi có một 'hiển thị trên bản đồ' nút mà khi nhấp mở ra một DialogBox/lightbox với bản đồ google trong.
• Tôi không muốn để nạp api bản đồ trên pageload, chỉ khi bản đồ đã được yêu cầu

Đây là tập tin php sự "hiển thị trên bản đồ" nút đặt vào hộp thoại:

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

Tôi đã cố gắng để tải API trước ajaxing trong hộp thoại như thế này:

$('img.map').click(function(){  
    var rel = $(this).attr('rel'); 
    $.getScript('http://maps.google.com/maps/api/js?sensor=false', function(){ 
     $.fn.colorbox({ 
      href:rel 
     }) 
    }); 
}) 

này dường như không làm việc :(

tôi cũng đã cố gắng :

• thêm <script src="http://maps.google.com/maps/api/js?sensor=false"></script> vào file ajax
• type = "text/javascript" chạy $.getScript('http://maps.google.com/maps/api/js?sensor=false'); trên doc.ready

vấn đề trình duyệt có vẻ được chuyển hướng đến các tập tin api.js - bạn sẽ thấy một màn hình trắng

Answer 1

This FAQ answer chi tiết cách tải API Maps một cách không đồng bộ và có một số example phù hợp với nó.

Về cơ bản, bạn nên đặt mã thực thi của mình vào một hàm được đặt tên, sau đó tải tham chiếu API Maps cho biết gọi lại và sử dụng thông số "async". Hoặc bạn có thể sử dụng getJSON jQuery như vậy:

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

Answer 2

nhờ chỉ cho tôi đi đúng hướng Andrew, vấn đề của tôi là gọi lại trong yêu cầu api là bắt buộc đối với tải api theo yêu cầu.

Đây là mã jquery cuối cùng của tôi:

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