Monday, November 28, 2022
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. 


the authortherichpost
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 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

1 Comment

Leave a Reply

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