ReferenceError: Google не определен после обновления страницы

Question

Я использую Google Places API на своем веб-сайте для целей автозаполнения. Во-первых, все работает нормально, но когда я обновляю страницу на определенном угловом компоненте, он выдает ошибку, что

ReferenceError: google is not defined

Я искал номер веб-сайта, но ни одно из решений не сработало. Я пытался добавить async и defer в тег скрипта в index.html, но не работает

register.component.ts

declare var google: any;
export class RegisterComponent implements AfterViewInit {
   constructor() { }
   ngAfterViewInit() {
      const input = <HTMLInputElement>document.getElementById('googlePlaces');
      const autocomplete = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
      google.maps.event.addListener(autocomplete, 'place_changed', () => {
       this.place = autocomplete.getPlace();
      })
   }
}

register.component.html

<input id="googlePlaces" type="text" class="input-custom" formControlName="location" placeholder="Enter Place">

и я добавил скрипт в основной index.html файл с действительным ключом API, который, кажется, будет в порядке, поскольку он работает с первого раза

Answer 1

Вы не используете правильный способ инициализации карты Google в угловых

Посмотрите на этот код, и вы найдете свое счастье в Google :)

this._mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompleteInput'), {});
      google.maps.event.addListener(autocomplete, 'place_changed', () => {
        this._ngZone.run(() => {
          const place = autocomplete.getPlace();
          ...
       });
     ...
   });

mapsAPILoader и ngZone должны быть добавлены в конструктор

 constructor(
      private _mapsAPILoader: MapsAPILoader,
      private _ngZone: NgZone) { }

Не стесняйтесь голосовать, если это поможет;)