Как интегрировать Карты Google в приложение Angular 9 - PullRequest
Новая
       4

Как интегрировать Карты Google в приложение Angular 9

0 голосов
/ 04 марта 2020

Я пытаюсь следовать этому руководству по отображению карт Google в моем приложении Angular 9, но я столкнулся с проблемой ниже.

Я выполнил следующие шаги:

  1. Я запустил npm install @angular/google-maps

  2. Импортировал указанный ниже модуль и добавил его в мой массив импорта в AppModule :

import { GoogleMapsModule } from '@angular/google-maps';

Добавление этого тега скрипта с моим ключом API:

<script src="https://maps.googleapis.com/maps/api/js?key=myKey"></script>

Добавлен этот тег в мой HTML:

<google-map></google-map>

Но при загрузке страницы я получаю эту ошибку в консоли:

console_error

Может кто-нибудь сказать, пожалуйста, что является причиной этой ошибки и как ее можно устранить? Я следовал инструкциям в руководстве, поэтому не уверен, что делаю неправильно.

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Я обнаружил, что это будет работать, только когда я импортировал скрипт в заголовок моего индекса. html. В любом случае, ниже, и я получаю ошибки. 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>apoms</title>
  <base href="/">

  <script src="https://maps.googleapis.com/maps/api/js?libraries=places&amp;key=[APIKey]"></script>

  ....
</head>
<body>
  <app-root></app-root>
  <!-- <noscript>Please enable JavaScript to continue using this application.</noscript> -->
</body>
</html>
0 голосов
/ 05 марта 2020

Вы импортировали импорт {MapInfoWindow} из '@ angular / google-maps'; в вашем компоненте и используйте @ViewChild (MapInfoWindow, {stati c: false}) infoWindow: MapInfoWindow; в классе?.

...