Dynamicznie ładowanie Google Maps api

Question

Próbuję załadować Google Maps api jest dynamicznie. używam następujący kod:

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

ale kiedy próbuje stworzyć mapę

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

lub

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

Dostaję błąd, że Google (lub GMap2) jest niezdefiniowany.

Answer 1

Upewnij się, że nie tworzysz instancji mapy przed zakończeniem ładowania Javascript.

Ponadto, jeśli chcesz używać programu ładującego API AJAX, trzeba to zrobić tak:

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

W przeciwnym wypadku, wystarczy użyć stałe źródło mapy skryptu API:

<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

I Zrobiliśmy to tak ... ten przykład używa jQuery i mapy google 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

Możesz to zrobić. Możesz dodać nazwę funkcji zwrotnej w adresie URL. Zostanie on wywołany, gdy API zostanie załadowany. Ta funkcja oddzwaniania musi być dostępna w zakresie dokumentu.

zrobiłem, że jakiś czas temu przez wyzwalanie niestandardowego zdarzenia w oknie z jQuery: http://jsfiddle.net/fZqqW/5/

używany "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(); 
})());​ 

asynchronicznie Ładowanie API

Możesz chcieć załadować kod JavaScript API Map Google po zakończeniu ładowania strony lub na żądanie. Aby to zrobić, możesz wstawić własny znacznik w odpowiedzi na zdarzenie window.onload lub wywołanie funkcji, , ale musisz dodatkowo poinstruować program uruchamiający JavaScript API JavaScript , aby opóźnić wykonanie kodu aplikacji, dopóki API JavaScript Maps kod jest w pełni załadowany. Możesz to zrobić, używając parametru callback , który jako argument przyjmuje funkcję do wykonania po kończeniu ładowania interfejsu API.

Poniższy kod instruuje aplikację, aby załadowała interfejs API Map Google po pełnym załadowaniu strony (przy użyciu window.onload) i zapisaniu interfejsu API JavaScript Maps API w tagu na stronie. Dodatkowo możemy polecić API tylko do wykonywania funkcji initialize() po API w pełni załadowany przekazując zwrotnego = zainicjować do map

zobaczyć tutaj: https://developers.google.com/maps/documentation/javascript/tutorial