Angular6Google Map

Angular Google Maps

Angular Google Maps - The Rich post

Hello to all, welcome to  In this post, I will implemented Angular Google Maps.

Angular gives us so many default features and this is the best part of Angular. Today I will implemented Google Maps in Angular 6 Application. In my previous posts, I have done so many tricks with Google Maps Api.

Here is the working image of Google Map in Angular 6:

angular google maps

Here are the simple and easy steps to implement Google Map In Angular 6:

1. First, Run the following command into your terminal to add Angular Google Maps( AGM) via the Node Package Manager into your Angular 6 App:
npm install @agm/core --save


2.  Here is the code need to add app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core';

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


3. Here is the code need to add app.component.ts file:
import {Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  lat: number = 43.653908;
  lng: number = -79.384293;


4. Finally code need to add app.component.html file:
<div class="jumbotron text-center">
  <h1>Angular Google Maps
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>


5. App.component.css file code:
agm-map {
  height: 300px;


This is it. If have any query related to this post then please do ask questions or comment below. I will come with more post related to Angular Google Map. 


Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, Angular 8, Angular 9, Angular 10 Nodejs, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

1 Comment

Leave a Reply

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