Как сделать обратный вызов в Google Maps init в отдельных файлах веб-приложения

Когда у меня был API-интерфейс API Карт Google:

 

в index.html , я получил ошибку: Uncaught InvalidValueError: initMap is not a function .

Я хочу сохранить все мои объявления bower_component , CSS, API и скриптов в моем файле index.html на моем веб-приложении AngularJS с помощью Yeoman-scaffolded. Карта, которую я на самом деле пыталась воссоздать, будет на другом маршруте, назовем ее маршрутом «afterlogin», просто базовой картой . Я разделил js и html html-компоненты на afterlogin.js и afterlogin.html

Для этого существует ряд потенциальных причин. Один из них был представлен здесь в качестве параметра для настройки вызова для соответствия пространству имен, https://stackoverflow.com/a/34466824/1923016 . Это потребует углового обслуживания? Если да, то как служба будет работать с функцией initMap и ее вызовом в api- initMap Google maps api?

Одним из осложнений является порядок. Я новичок в веб-приложении dev, но из того, что я могу сказать, сначала загружает index.html , использует url в fragmentе, чтобы сделать обратный initMap функции initMap которая не initMap в ... в файле index.html или в файле app.js Вместо этого, поскольку функция init находится в js-коде маршрута, она не может быть видна, поэтому требуется какая-то «версия пространства имен» для вызова. Это приводит к ошибке консоли даже с логина входа, который даже не там, где находится div для карты.

—- РЕДАКТИРОВАТЬ: —-

Также обратите внимание, что в этом случае это не помогло:

 window.initMap = function(){ //... } 

Это также не применяется, поскольку функция никогда не вызывается: Uncaught InvalidValueError: initMap не является функцией

– – – – – –

afterlogin.js

 angular.module('myappproject').controller('AfterloginCtrl', function ($scope) { function initMap() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 17, center: {lat: -33.8666, lng: 151.1958} }); var marker = new google.maps.Marker({ map: map, // Define the place with a location, and a query string. place: { location: {lat: -33.8666, lng: 151.1958}, query: 'Google, Sydney, Australia' }, // Attributions help users find your site again. attribution: { source: 'Google Maps JavaScript API', webUrl: 'https://developers.google.com/maps/' } }); // Construct a new InfoWindow. var infoWindow = new google.maps.InfoWindow({ content: 'Google Sydney' }); // Opens the InfoWindow when marker is clicked. marker.addListener('click', function() { infoWindow.open(map, marker); }); } }); 

afterlogin.html

    after login page    html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; }    

Поскольку скрипт SDK Google Maps загружает синхронизацию (из-за async атрибута), в URL-адресе есть параметр callback .

Чтобы решить проблему, вам нужно понять механизм async в google sdk

Атрибут async позволяет браузеру отображать остальную часть вашего сайта, пока загружается API JavaScript JavaScript. Когда API готов, он вызовет функцию, указанную с использованием параметра обратного вызова.

https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

Таким образом, решение заключается в загрузке скрипта synchronic:

В теге скрипта, который загружает API JavaScript Карт, можно опустить атрибут async и параметр обратного вызова. Это приведет к загрузке API для блокировки до тех пор, пока API не будет загружен.

Это, вероятно, замедлит загрузку вашей страницы. Но это означает, что вы можете писать последующие tags сценария, предполагая, что API уже загружен.

https://developers.google.com/maps/documentation/javascript/tutorial#sync

  1. Вы можете удалить атрибут async таким образом, страница остановится, пока скрипт не завершит загрузку и не запустится на странице. Итак, когда браузер перейдет к вашему коду, будет доступен весь объект SDK.
  2. Теперь, поскольку не существует кода, initMap функцию initMap (помните: кто его назвал, это сценарий sdk, который вызывается только в режиме async ), вам нужно вызвать его самостоятельно. Поэтому просто позвоните в конец controllerа.