bản đồ tải google v3 động với ajax

Question

Khi tôi cố gắng để tải Google Maps v3 với ajax kết quả là:

<script src="http://maps.gstatic.com/intl/en_us/mapfiles/api-3/2/8a/main.js" type="text/javascript"></script> 

trong mã nguồn, tôi giả sử rằng viết với document.write javascript();

cách tôi có thể thực hiện việc này mà không có khung nội tuyến?

cảm ơn.

Answer 1

Điều này không được hỗ trợ. Hãy tải API sử dụng các phương pháp hỗ trợ:

http://code.google.com/apis/maps/documentation/javascript/tutorial.html#Loading_the_Maps_API

Answer 2

tôi đã thực hiện nó như vậy ... Ví dụ này sử dụng jQuery và google bản đồ v3.x

$.getScript("http://maps.google.com/maps/api/js?sensor=true&region=nz&async=2&callback=MapApiLoaded", function() {}); 

function MapApiLoaded() { 
    //.... put your map setup code here: new google.maps.Map(...) etc 
} 

Answer 3

Tôi đã thay đổi một chút mẫu Myster bit, có vẻ hoạt động tốt đối với tôi

window.mapapiloaded = function() { 
     console.log('$.ajax done: use google.maps'); 
     createusinggmaps(); 
    }; 

    $.ajax({ 
     url: 'http://maps.google.com/-maps/api/js?v=3.2&sensor=true&region=it&async=2&callback=mapapiloaded', 
     dataType: 'script', 
     timeout: 30000, 
     success: function() { 
      console.log('$.ajax progress: waiting for mapapiloaded callback'); 
     }, 
     error: function() { 
      console.log('$.ajax fail: use osm instead of google.maps'); 
      createusingosm(); 
     } 
    }); 

Answer 4

Tìm một cách thực tế.

Fiddle ở đây với sự kiện tùy chỉnh (jQuery): http://jsfiddle.net/fZqqW/94/

window.gMapsCallback = function(){ 
    $(window).trigger('gMapsLoaded'); 
} 

$(document).ready((function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(47.3239, 5.0428), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    function loadGoogleMaps(){ 
     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    loadGoogleMaps(); 
})());​ 

EDIT Chức năng loadGoogleMaps có thể là thực tế hơn nếu khai báo trong phạm vi toàn cầu, đặc biệt là khi làm việc trong một ứng dụng ajax. Và một kiểm tra boolean sẽ ngăn tải api nhiều lần vì điều hướng.

var gMapsLoaded = false; 
window.gMapsCallback = function(){ 
    gMapsLoaded = true; 
    $(window).trigger('gMapsLoaded'); 
} 
window.loadGoogleMaps = function(){ 
    if(gMapsLoaded) return window.gMapsCallback(); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src","http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"); 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
} 

$(document).ready(function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(47.3239, 5.0428), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions); 
    } 
    $(window).bind('gMapsLoaded', initialize); 
    window.loadGoogleMaps(); 
}); 

Answer 5

$LAB 
    .setOptions({AlwaysPreserveOrder:true}) 
    .script("http://maps.google.com/maps/api/js?v=3.exp&sensor=false&async=2") 
    .script("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/13/6/main.js") 
    .script("script.js"); 

Bên trong script.js khởi tạo bản đồ của bạn mà không cần phương pháp googles tải ví dụ:

Namespace.map = (function(){ 

    var map, 
     markers = []; 

    return{ 
     init: function(){ 
       var myLatlng = new google.maps.LatLng(-25.363882,131.044922), 

        mapOptions = { 
         zoom: 4, 
         center: myLatlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        }; 

       map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

       var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: 'Hello World!' 
       }); 

       markers.push(marker); 
      } 
    }; 

}()); 

Bên trong script.js:

Namespace.map.init(); 

// Don't use: google.maps.event.addDomListener(window, 'load', initialize); 

Lưu ý: Đừng dựa trên phương pháp này khi Google thay đổi tên của tệp js thứ hai. Dưới đây là một ví dụ từ tài liệu của họ:

https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

Answer 6

Bạn phải sử dụng tham số này 'callback = khởi tạo' trong kịch bản bản đồ google API để tải với ajax:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script> 

Đây là một bản đồ google tài liệu:

Cómo cargar el API de forma asíncrona

Answer 7

đơn giản và làm việc giải pháp (sử dụng jQuery):

var gMapsLoaded = false; 

function loadGoogleMaps() { if(!gMapsLoaded) { $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=GoogleMapsLoaded", function(){}); } else { GoogleMapsLoaded(); } } 

function GoogleMapsLoaded() { 

    gMapsLoaded = true; 

    // your code here - init map ... 
} 

dán mã này vào tập lệnh và sau đó gọi hàm tảiGoogleMaps(); khi bạn cần!