ReferenceError: "Google не определен"

Question

Я использую Angular Google Maps для отображения карты Google в моем приложении Angular 7.

Мне нужно было набрать Google Maps, чтобы сделать что-то вроде этого:

allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(51.130739, -0.868052), // SW
    new google.maps.LatLng(51.891257, 0.559417) // NE
);

Итак, я сделал npm install --save-dev @typings/googlemaps

Я пытался решить разные ошибки, но ни одна из них не сработала.

import {} from 'googlemaps'
declare const google: any; 

В tsconfig.json у меня есть "typeRoots": ["node_modules/@types"] и вtsconfig.app.json "types": ["googlemaps"]

Приложение компилируется без ошибок, но в консоли Chrome появляется ошибка:

ERROR ReferenceError: "google is not defined"

Answer 1

Эта ошибка, скорее всего, возникает с момента инициализации allowedBounds, API Карт Google еще не загружен , и поэтому объекты Карт Google, такие как google.maps.LatLngBounds, еще не доступны. agm-map поставляется с загрузчиком , который загружает библиотеку Карт Google асинхронно .

Чтобы обеспечить загрузку API Карт Google, можно использовать MapsAPILoader сервис , как показано ниже:

export class AppComponent  {
  bounds = null;

  constructor(private mapsAPILoader: MapsAPILoader) {
    this.mapsAPILoader.load().then(() => {
      this.bounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(51.130739, -0.868052), // SW
        new google.maps.LatLng(51.891257, 0.559417) // NE
      );
      console.log(this.bounds);
    });
  }

}

Вот демонстрационная версия , которая демонстрирует, как разместить карту для заданных границ