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: //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)