6

Angular 5, 6 Google Maps (AGM) API Key - Integrating Google Maps

This sample application has the purpose of demonstrating how to Integrating Google Maps in Angular Applications?

The following steps are –
1.      Install Google Maps
2.      Setup YOUR_API_KEY in NgModule
3.      Setup your lat and lng in your component
4.      Setup Google template
5.      Setup your CSS for height and width, it must be setup.

Steps 1 - Install Angular Google Maps using below CLI command -
npm install @agm/core --save

Steps 2 - Setup YOUR_API_KEY in NgModule
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:'AIzaSyAfJTVKnpLl0ULuuwDuix-9ANpyQhP6mfc'
      //This is a GoogleAPIs Key. I already created using Google developer account.
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Steps 3 - Setup your lat and lng in your component
import { Component } from '@angular/core';

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


Steps 4 - Setup your Google template in your template
<h3>Angular Google API</h3>
<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map [latitude]="lat" [longitude]="lng">
  <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>

Steps 5 - Setup your CSS for height and width. You must add this css class.
agm-map {
    height: 350px;
}

For reference – watching your YouTube video https://youtu.be/-p2gZsNeFJg
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.
^