Tự động tải Google Maps api

Question

Tôi đang cố gắng tải bản đồ của google maps động. Tôi đang sử dụng đoạn mã sau:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'http://www.google.com/jsapi?key=<MY_KEY>; 
head.appendChild(script); 

nhưng khi cố gắng để tạo ra các bản đồ

map = new GMap2(document.getElementById("map")); 

hoặc

map = new google.maps.Map2(document.getElementById("map")); 

tôi nhận được một lỗi mà google (hoặc GMap2) không định nghĩa được.

Answer 1

Đảm bảo rằng bạn không khởi tạo bản đồ trước khi Javascript tải xong.

Ngoài ra, Nếu bạn muốn sử dụng bộ nạp AJAX API, bạn cần phải làm điều đó như thế này:

<script src="http://www.google.com/jsapi?key=ABCDEFG" type="text/javascript"></script> 
<script type="text/javascript"> 
    google.load("maps", "2.x"); 

    // Call this function when the page has been loaded 
    function initialize() { 
     var map = new google.maps.Map2(document.getElementById("map")); 
     map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); 
    } 
    google.setOnLoadCallback(initialize); 
</script> 

Nếu không, chỉ cần sử dụng nguồn Maps API kịch bản thông thường:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false" type="text/javascript"></script> 

Answer 2

tôi đã thực hiện nó như vậy ... ví dụ này sử dụng jQuery và google map 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

Bạn có thể làm điều này. Bạn có thể thêm tên hàm gọi lại trong url. Nó sẽ được gọi khi API được tải. Hàm gọi lại đó phải có thể truy cập được trong phạm vi của tài liệu.

tôi đã làm điều đó một số thời gian trước đây bằng cách kích hoạt một sự kiện tùy chỉnh trên cửa sổ với jQuery: http://jsfiddle.net/fZqqW/5/

sử dụng "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback"

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

$(document).ready((function(){ 
    function initialize(){ 
     var mapOptions = { 
      zoom: 8, 
      center: new google.maps.LatLng(-34.397, 150.644), 
      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(); 
})());​ 

không đồng bộ tải API

Bạn có thể muốn để tải mã JavaScript API Maps sau khi trang của bạn đã tải xong hoặc theo yêu cầu . Để làm như vậy, bạn có thể tiêm thẻ của riêng mình để phản hồi sự kiện window.onload hoặc gọi hàm, nhưng bạn cần hướng dẫn thêm API khởi động API của Maps API để trì hoãn việc thực thi mã ứng dụng của bạn cho đến khi API JavaScript của Maps mã được tải đầy đủ. Bạn có thể làm như vậy bằng cách sử dụng tham số gọi lại, thực hiện như một đối số hàm thực thi khi hoàn tất tải API.

Mã sau đây hướng dẫn ứng dụng tải API Maps sau khi trang đã được tải đầy đủ (sử dụng window.onload) và viết API JavaScript của bản đồ vào thẻ trong trang. Thêm vào đó, chúng tôi hướng dẫn các API để chỉ thực hiện initialize() chức năng sau API đã được nạp đầy đủ bằng cách thông qua callback = khởi tạo vào Maps

Xem ĐÂY: https://developers.google.com/maps/documentation/javascript/tutorial