Angular 11/10 Google Maps Example Tutorial

By Hardik Savani | October 30, 2020 | Category : Angular

Today, angular 10 google maps example is our main topic. you will learn angular 11/10 google maps marker example. step by step explain angular 10 google maps agm example. We will use angular 10 google maps agm-marker.

Agm npm package provide google map api where you can easily use google maps. here i will give you step by step very simple example of how to integrate google maps in angular. we will install agm/core npm package and set latitude and longitude with marker. so you have to just follow bellow step to create very basic example, you can also see bellow preview:


Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install agm/core npm Package

Now in this step, we need to just install agm/core in our angular application. so let's add as like bellow:

npm install @agm/core --save

we also need to install "@types/googlemaps" for google maps library. so let's run bellow command to install googlemaps npm.

npm install @types/googlemaps --save-dev

next, we need to open "" from root folder and you need to add "googlemaps" in types array as like bellow i added:


"extends": "./tsconfig.base.json",

"compilerOptions": {

"outDir": "./out-tsc/app",

"types": [




"files": [




"include": [




Step 3: Import Material AgmCoreModule

Now, here we will import AgmCoreModule from @agm/core and then we add on declarations part. in this file we also need to add Google API Key need to add. you can generate google api key from here: Google Console. so let's update app.module.ts file as like bellow:


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

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule } from '@angular/forms';

import { AgmCoreModule } from '@agm/core';


declarations: [



imports: [






libraries: ['places']



providers: [],

bootstrap: [AppComponent]


export class AppModule { }

Step 4: Update Ts File

here, we need to update ts file as like bellow with lat and long variable:


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


selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']


export class AppComponent {

title = 'firstApp';

lat = 22.2736308;

long = 70.7512555;


Step 5: Update HTML File

here, we need to update html file as like bellow code:


<h1>Angular Google Map Example -</h1>










Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...

Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: