CODEWITHSUNDEEP
angulargoogle-mapsangular9
user9847788
user9847788

Reputation: 2445

How to integrate Google Maps into Angular 9 app

I am trying to follow this tutorial to display google maps in my Angular 9 app, but I am facing the below issue.

I carried out the below steps:

  1. I ran npm install @angular/google-maps

  2. Imported the below Module & added it to my imports array in AppModule:

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

  1. Adding this script tag with my api key:

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

  1. Added this tag to my HTML:

<google-map></google-map>

But when I load the page I get this error in the console:

console_error

Can someone please tell me what is causing this error, & how it can be resolved? I've followed the steps in the tutorial so I'm not sure what I'm doing incorrectly.

Upvotes: 1

Views: 4477

Answers (2)

Jim Jimson
Jim Jimson

Reputation: 2528

I found this would only work when I imported the script into the head of my index.html. Anywher below that and I get errors.

<!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>

Upvotes: 2

RASHID HAMID
RASHID HAMID

Reputation: 53

Have you imported import { MapInfoWindow } from '@angular/google-maps'; in your component and use @ViewChild(MapInfoWindow, { static: false }) infoWindow: MapInfoWindow; in class?.

Upvotes: 0

Related Questions