Angular Google Maps

Hello to all, welcome to therichpost.com.  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:

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';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
  AgmCoreModule.forRoot({
      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';
@Component({
  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
</h1>
</div>
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

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.