Asynchroniczny Google Maps API v3 undefined nie jest funkcją

Question

Piszę aplikację, która ładuje Mapy Google asynchronicznie za pomocą ręcznej architektury.
Po załadowaniu map nie załaduje się z jakiegoś powodu z jakiegoś powodu, a otrzymam numer Uncaught TypeError: undefined is not a function. Sprawdziłem inspektora chrome i odkryłem, że google.maps jest prawidłowym obiektem, ale nie ma on żadnych własnych właściwości. Ręcznie wywołuje funkcję "initialize" po załadowaniu dokumentu. Co ja robię źle?!

Answer 1

Nie można załadować mapy asynchroniczne-API ze znanego adresu URL (http://maps.googleapis.com/maps/api/js?v=3&sensor=false)

Gdy spojrzeć na skrypt pliku, zobaczysz, że to nie jest to, że API zostanie załadowany, jest to program ładujący ładujący interfejs API. Program ładujący korzysta z document.write(), co prowadzi do nieoczekiwanych wyników po wywołaniu po załadowaniu dokumentu.

Ponadto zdarzenie onload dokumentu nie czeka na załadowane obiekty asynchroniczne, może być zbyt szybkie.

Nie można również użyć zdarzenia load skryptu do wywołania funkcji initialize, ponieważ po uruchomieniu ładuje się program ładujący, a nie map-API.

Co zrobić:
dołączyć oddzwonienia parametr do skryptu URL (wraz z nazwą initialize-funkcji jako wartości)

http://maps.googleapis.com/maps/api/js?v=3&sensor=false&callback=initialize

Teraz masz inną ładowarkę, która :

1. nie używa document.write()
2. wywołuje callback-functi na (zainicjować) gdy mapy-API został załadowany

Demo: http://jsfiddle.net/doktormolle/7cu2F/

---

Podobne do komentarza: wydaje się zwrotna musi być funkcją przymocowane bezpośrednio do okna. nie fajne google :)

Istnieje inna opcja, the google-API-loader, która obsługuje korzystanie z odwołań funkcji (zamiast nazw funkcji).

Próbka, która ładuje map-API asynchronicznie, ale tylko wtedy, gdy istnieje element z identyfikatorem map-canvas w dokumencie, a następnie tworzy mapę:

window.addEventListener('load',function(){ 
 
     if(document.getElementById('map-canvas')){ 
 
     google.load("maps", "3",{ 
 
      callback:function(){ 
 
      new google.maps.Map(document.getElementById('map-canvas'), { 
 
       center: new google.maps.LatLng(0,0), 
 
       zoom: 3 
 
       }); 
 
      } 
 
     });  
 
     } 
 
    },false);

 body,html,#map-canvas{ 
 
     height:100%; 
 
     margin:0; 
 
     padding:0; 
 
     width:100%; 
 
     }

<script src="https://www.google.com/jsapi?.js"></script> 
 
<div id="map-canvas"></div>