Angular 6 Google Maps

Angular Google Maps (AGM) Core - Angular 6 Google Maps components

In this article, I am going to share the Angular 6 Google Maps using the AGM Core. To archive, involves multiple steps which are the following.

Explore itAngular 6 Questions

Steps 1 - Create your Angular 6 project and go to project directory and install the below command.

Steps 2 - Install Angular 6 Google Maps
npm install @agm/core


Steps 3 -Import the AgmCoreModule in the app.module.ts .
import { AgmCoreModule } from '@agm/core';

Steps 4 - And add the Agm Core Root for Google API key and it looks like –
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' //Google API key for maps
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


Note – You must need to provide a Google Maps API key to be able to see a Map. Get an APIkey here...

Steps 5 - Added the components - app.component.ts, app.component.html and app.component.css -

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  lat: number = 26.765844;
  lng: number = 83.364944;
}

Note – I have added Gorakhpur, Uttar Pradesh, India’s Geographic Information (Latitude and Longitude).

Steps 6 - Setup your Google HTML template -
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 7 - Setup your Google template CSS class for managing the height and width. You must add the CSS class, without this class not display the Google Maps.

agm-map {
    height: 400px;
    width: 400px;
}

Result 

ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.