Динамическая загрузка Google Maps api's

Question

Im пытается динамически загружать карты google Google. Я использую следующий код:

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

но при попытке создать карту

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

или

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

я получаю сообщение об ошибке, что Google (или GMap2) не определено.

Answer 1

Убедитесь, что вы не создаете экземпляр карты до завершения загрузки Javascript.

Кроме того, если вы хотите использовать API загрузчик AJAX, что вам нужно сделать это следующим образом:

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

В противном случае, просто использовать обычный источник Maps 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 Это сделано так: этот пример использует jQuery и 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

Вы можете сделать это. Вы можете добавить имя функции обратного вызова в URL-адрес. Он будет вызываться, когда API загрузится. Эта функция обратного вызова должна быть доступна в области документа.

Я сделал это некоторое время назад, вызывая пользовательское событие на окно с JQuery: http://jsfiddle.net/fZqqW/5/

используется "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(); 
})());​ 

Асинхронный Загрузка API

Вы можете для загрузки кода JavaScript API Карт после того, как ваша страница закончила загрузку или по требованию. Для этого вы можете ввести свой собственный тег в ответ на событие window.onload или вызов функции , но вам необходимо дополнительно проинструктировать загрузочный лоток API JavaScript JavaScript , чтобы отложить выполнение кода вашего приложения до тех пор, пока API-интерфейс Maps код полностью загружен. Вы можете сделать это, используя параметр обратного вызова , который принимает в качестве аргумента функцию, выполняемую после , завершая загрузку API.

Следующий код инструктирует приложение загрузить API Карт после того, как страница полностью загружена (с использованием window.onload), и напишите Maps JavaScript API в тег на странице. Кроме того, мы поручаем API только выполнять функцию инициализации() после того, как АНИ полностью загружена, передавая функцию обратного вызова = инициализация Карт

Смотрите ЗДЕСЬ: https://developers.google.com/maps/documentation/javascript/tutorial