Add Google Map in Angular Application

Google Map is a google service which helps us to locate shops, events, addresses, places, route path etc. Sometimes, In our angular application we wants to add google map. So, here we will see a angular module which helps us to add google map in angular application. The Angular Google Maps (AGM) package details is given here.

Create an Angular project

First if you haven’t installed Angular CLI yet, please run the following command first:

npm install -g @angular/cli

Now, Run the following commands to create a new Angular project with Angular CLI:

ng new google-map-project
cd google-map-project

Install Angular Google Maps Module

npm install @agm/core

Import AGM Module

Open src/app/app.module.ts and import the AgmCoreModule. Here you need to provide a Google Maps API key. You can get an API key here.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: ''
    })
  ],
  providers: [],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Include Google Map in Angular Template

Open the file src/app/app.component.html and paste the following content:

<agm-map [latitude]="lat" [longitude]="lng" >
  <agm-marker [latitude]="lat" [longitude]="lng">
    <agm-info-window>RMC</agm-info-window>
  </agm-marker>
</agm-map>

Open the file src/app/app.component.ts and define the variables.

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

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

Styling the Google Map in Angular

Open the file src/app/app.component.css and give height to map:

agm-map {
  height: 300px;
}

Testing:

Run the following command in the project root folder

ng serve

Open the following URL in your browser: http://localhost:4200/

Now, you can add google map in angular application and apply designs as you want.