Подтвердить что ты не робот

Async API Google Maps v3 undefined не является функцией

Я пишу приложение, которое загружает Карты Google асинхронно с помощью созданной вручную фреймворка.
Когда я загружаю карты, по какой-то причине он не будет загружать все это, и я закончил с Uncaught TypeError: undefined is not a function. Я проверил инспектора хрома и выяснил, что google.maps - действительный объект, но он не имеет никаких собственных свойств. Я вручную вызываю функцию инициализации после загрузки документа. Что я делаю неправильно?!

Ответ 1

Вы не можете загружать асинхронный API-интерфейс карт с известным URL-адресом (http://maps.googleapis.com/maps/api/js?v=3&sensor=false)

Когда вы посмотрите на script файл, вы увидите, что это не API, который загружается, это загрузчик, который загружает API. Загрузчик использует document.write(), что приведет к неожиданным результатам при вызове после загрузки документа.

Кроме того, onload-событие документа не ждет асинхронных загружаемых объектов, оно может быть слишком быстрым.

Вы также не можете использовать событие load для script для вызова функции initialize, потому что когда он запускается, загрузчик загружается, а не API-карты.

Что делать:
добавьте параметр обратного вызова в script -URL (с именем функции initialize-функции как значение)

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

Теперь вы получаете другой загрузчик, который:

не использует document.write()
вызывает функцию обратного вызова (инициализировать) при загрузке карт-API.

Демо: http://jsfiddle.net/doktormolle/7cu2F/

Связано с комментарием: кажется, обратный вызов должен быть функцией, напрямую связанной с окном. не круто google:)

Существует еще один вариант google-API-загрузчик, который поддерживает использование функциональных ссылок (вместо имен функций).

Пример, который асинхронно загружает API-интерфейс карт, но только тогда, когда в документе есть элемент с идентификатором map-canvas, а затем создается карта:

    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>