Google maps in Angular

Question

So I am following this article to include google maps in my Angular SPA.

My HTML is app.component.html

<html>
  <head>
    <meta charset="utf-8" />
    <title>Map</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script src="https://maps.googleapis.com/maps/api/js?key=xxxx"></script>

  </head>
  <body>
    <h2>Text</h2>
    <textarea rows="5"  [ngModel]="data" (ngModelChange)="change($event)"></textarea>
    <google-map
      height="500px"
      width="100%"
      [zoom]="zoom"
      [center]="center"
      [options]="options"
    ></google-map>
    <!-- Use custom zoom buttons -->
    <button (click)="zoomIn()">Zoom in</button>
    <button (click)="zoomOut()">Zoom out</button>
  </body>
</html>

The app.component.ts is

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'demoapp';
  data: string = '';
  zoom = 12
  center: google.maps.LatLngLiteral
  options: google.maps.MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

  constructor(){
    
  }
  ngOnInit(): void {
    navigator.geolocation.getCurrentPosition((position) => {
      this.center = {
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      }
    })
  }
  zoomIn() {
    if (this.zoom < this.options.maxZoom) this.zoom++
  }

  zoomOut() {
    if (this.zoom > this.options.minZoom) this.zoom--
  }
  change(event){
    console.table(event);
  }
}

app.module.ts is

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { GoogleMapsModule } from '@angular/google-maps'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    GoogleMapsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

When I run ng serve the map does not render and I am seeing the following error in the console.

core.js:4352 ERROR Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (google-maps.js:203)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (google-maps.js:421)
    at getNodeInjectable (core.js:4184)
    at instantiateAllDirectives (core.js:8102)
    at createDirectivesInstances (core.js:7476)
    at ɵɵelementStart (core.js:14800)
    at Module.ɵɵelement (core.js:14851)
    at AppComponent_Template (app.component.html:14)
    at executeTemplate (core.js:7449)
    at renderView (core.js:7258)
defaultErrorLogger @ core.js:4352
handleError @ core.js:4400
(anonymous) @ core.js:28146
invoke @ zone-evergreen.js:364
run @ zone-evergreen.js:123
runOutsideAngular @ core.js:27413
(anonymous) @ core.js:28146
invoke @ zone-evergreen.js:364
onInvoke @ core.js:27486
invoke @ zone-evergreen.js:363
run @ zone-evergreen.js:123
(anonymous) @ zone-evergreen.js:857
invokeTask @ zone-evergreen.js:399
onInvokeTask @ core.js:27474
invokeTask @ zone-evergreen.js:398
runTask @ zone-evergreen.js:167
drainMicroTaskQueue @ zone-evergreen.js:569
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:552
scheduleTask @ zone-evergreen.js:388
scheduleTask @ zone-evergreen.js:210
scheduleMicroTask @ zone-evergreen.js:230
scheduleResolveOrReject @ zone-evergreen.js:847
then @ zone-evergreen.js:979
bootstrapModule @ core.js:28074
zUnb @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.js:11
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
main.ts:12 Error: Namespace google not found, cannot construct embedded google map. Please install the Google Maps JavaScript API: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API
    at new GoogleMap (google-maps.js:203)
    at NodeInjectorFactory.GoogleMap_Factory [as factory] (google-maps.js:421)
    at getNodeInjectable (core.js:4184)
    at instantiateAllDirectives (core.js:8102)
    at createDirectivesInstances (core.js:7476)
    at ɵɵelementStart (core.js:14800)
    at Module.ɵɵelement (core.js:14851)
    at AppComponent_Template (app.component.html:14)
    at executeTemplate (core.js:7449)
    at renderView (core.js:7258)

John · Accepted Answer · 2022-01-23 22:02:39Z

1

try:

export class AppComponent implements OnInit {
 @ViewChild(google.maps.Map, { static: false }) map!: google.maps.Map
//alternative: @ViewChild(GoogleMap, { static: false }) map!: GoogleMap

//...
}

answered Jan 23, 2022 at 22:02

John

112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ravi Gajera · Accepted Answer · 2021-05-26 03:03:06Z

0

A bit of a late response but I had a similar issue using Angular CLI RC.0.

It turned out that I hadn't install and imported the typings, which can be done as follows:

npm install --save-dev @types/googlemaps

import {} from '@types/googlemaps';

answered May 26, 2021 at 3:03

Ravi Gajera

1876 bronze badges

Collectives™ on Stack Overflow

Google maps in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related