Tuesday, July 16, 2024
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 14, Angular 15, Angular 16, Angular 17, 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.