TypeError: Невозможно прочитать свойство 'maps' из неопределенного (Google maps помещает автозаполнение Angular 2)

Question

Я пытаюсь использовать Google Maps Auto в комплекте с Angular 5, я следовал этому руководству в http://myangularworld.blogspot.com.eg/2017/07/google-maps-places-autocomplete-using.html, и после запуска по какой-то причине он не может определить Google

это мой импорт:

import { .... NgZone }
import { MapsAPILoader } from '@agm/core';
import { } from '@types/googlemaps';
import { google } from '@agm/core/services/google-maps-types';

вот такие уколы:

constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone) {

}

и вот основная функция внутри ngonit:

ngOnInit() {
this.mapsAPILoader.load().then(() => {
  const autoComplete = new google.maps.places.AutoComplete(this.searchElement.nativeElement, { types: ['address'] });
  autoComplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      const places: google.maps.places.PlaceResult = autoComplete.getPlace();
      if (places.geometry === undefined || places.geometry === null) {
        return;
      }
    });
  });
});

а вот и ошибка:

TypeError: Cannot read property 'maps' of undefined

Answer 1

Давайте посмотрим на это:

...
// import this two modules and all should be fine.
import { } from 'googlemaps';
import { MapsAPILoader } from '@agm/core';
...
constructor(
    private mapsAPILoader: MapsAPILoader,
    private ngZone: NgZone
  ) {}

    ngOnInit() {
this.mapsAPILoader.load().then(() => {
  const autoComplete = new google.maps.places.AutoComplete(this.searchElement.nativeElement, { types: ['address'] });
  autoComplete.addListener('place_changed', () => {
    this.ngZone.run(() => {
      const places: google.maps.places.PlaceResult = autoComplete.getPlace();
      if (places.geometry === undefined || places.geometry === null) {
        return;
      }
    });
  });
});

Кроме того, вам необходимо установить следующие npm:

$ npm install @agm/core --save
$ npm install @types/googlemaps --save-dev

Надеюсь, это поможет вам. http://brianflove.com/2016/10/18/angular-2-google-maps-places-autocomplete/

UPD

Я создал пример стекаблица: https://stackblitz.com/edit/angular-5-example-zswbff У меня все отлично работает.

Используете ли вы веб-пакет, угловой / cli?

Answer 2

Я понял это, я использовал:

declare var google

вместо:

import { google } from '@agm/core/services/google-maps-types'

, и это просто работало нормально, у меня нет четкого объяснения этому, но этотолько что работал

Answer 3

Звучит так, будто вы не установили npm, попробуйте:

npm install @types/googlemaps