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