Angular6Google Map

Angular Google Maps

Angular Google Maps - The Rich post

Views

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:

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

@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. 

 

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

1 Comment

Leave a Reply

Positive SSL