DEV Community

Cover image for Add Google Map in Angular Application
Chetan Rohilla
Chetan Rohilla

Posted on • Updated on • Originally published at w3courses.org

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
Enter fullscreen mode Exit fullscreen mode

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

ng new google-map-project
cd google-map-project
Enter fullscreen mode Exit fullscreen mode

Install Angular Google Maps Module

npm install @agm/core
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Styling the Google Map in Angular

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

agm-map {
  height: 300px;
}
Enter fullscreen mode Exit fullscreen mode

Testing:

Run the following command in the project root folder

ng serve
Enter fullscreen mode Exit fullscreen mode

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

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


Please like share and give positive feedback to motivate me to write more.

For more tutorials visit my website

Thanks:)
Happy Coding:)

Top comments (0)