Home Angular 8 Angular 9 Google Maps working example

Angular 9 Google Maps working example

by therichpost
angular google maps

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 9 Google Maps working example.

angular google maps
angular google maps

Post Working:

I am showing google maps in Angular 9.

Here is the complete code snippet and please follow carefully:

1. Very first, here are common basics steps to add angular 9 application on your machine:

$ npm install -g @angular/cli

$ ng new angulargooglemaps // Set Angular9 Application on your pc

cd angulargooglemaps // Go inside project folder

ng serve // Run project

http://localhost:4200/  //Check working Local server


2. Now run below command into your terminal to include google maps package into your angular 9 application:

npm install @agm/core --save


3. Now add below code into your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
      apiKey: 'AIzaSyAFgM81Qz-SwfTzUsr4F51AgDj0HdN88CQ'
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }


4. Add, below code into your app.component.ts file:

import { Component } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'angulargooglemap';
  lat: number = 43.653908;
  lng: number = -79.384293;


5. Add below code into app.component.html file:

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>


5. Finally add below code into app.component.css file:

agm-map {
    height: 300px;


This is it and if you have any kind of query then please let me know. Don’t forget to run ng serve command.


Thank you

You may also like


A good samaritan March 27, 2020 - 6:47 pm

You shouldn’t post your api keys publicly like that (unless they are expired or restricted), but in any case, it’s always better to just show people where can they get there own api keys instead

Ajay Malhotra March 28, 2020 - 9:42 am

yes right.

suvendu April 13, 2020 - 2:36 pm

show example to add tooltip in this map

Ajay Malhotra April 13, 2020 - 5:10 pm

yes sure and I will post on my youtube channel also so please subscribe that also.

AhmedBila July 12, 2020 - 10:10 am

Hi do you have any tutorial on how to allow a user reset their password? So if they click on forgot password, they will receive an email with a link and then they can reset the password? Doing that through mysql and php. That would be a really good tutorial that is missing from the internet sir

Ajay Malhotra July 12, 2020 - 10:15 am

Yes and I will update you soon.

AhmedBila July 12, 2020 - 10:20 am

Very good sir, I cant find anything about this on internat, would be very useful

deepika July 20, 2020 - 12:32 pm

this error is showing when ng serve cmd i execute please help me in solving this.
error TS2304: Cannot find name ‘google’.

20 style: keyof typeof google.maps.MapTypeControlStyle;

Ajay Malhotra July 20, 2020 - 12:35 pm

Have you followed above tutorial exactly?


Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.