Learn how to integrate Angular Google Maps in your app to provide your end users more contextual information about street addresses. AGM integration tutorial.

1. Angular
Google Maps
Tutorial:
Quick Guide
www.bacancytechnology.com

2. Introduction

3. The Google Maps integration in angular
allows developers to show locations on
google maps and information about location
in the content window when we move the
cursor over the marker.

4. Create an
Angular CLI
Project

5. Run the below command to install Angular
CLI.
npm install -g @angular/cli
Fire the following commands for creating a
new Angular project with Angular CLI:
ng new angular-google-maps
cd angular-google-maps

6. Install
Angular
Google Maps

7. Now, we will install AGM, i.e., Angular
Google Maps using the below command.
npm install @agm/core
npm i @types/googlemaps@3.39.13

8. @NgModule
Set-Up

9. You will need a Google Maps API key from
here in order to access the map in your
project. Open src/app/app.module.ts and
import the AgmCoreModule.
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { BrowserModule } from
'@angular/platform-browser';
import { AppRoutingModule } from './app-
routing.module';
import { AppComponent } from
'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [

10. BrowserModule,
AppRoutingModule,
AgmCoreModule.forRoot({
apiKey: ''
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

11. import { NgModule } from
'@angular/core';
import { AgmCoreModule } from
'@agm/core';
import { BrowserModule } from
'@angular/platform-browser';
import { AppRoutingModule } from
'./app-routing.module';
import { AppComponent } from
'./app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,

12. AgmCoreModule.forRoot({
apiKey: ''
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

13. Looking for a helping hand
to fine-tune the
performance of your
Angular app?

14. Configure the
App
Component

15. Open the file src/app/app.component.ts and
modify as shown below:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// google maps zoom level
zoom: number = 8;
// initial center position for the map
lat: number = 51.673858;
lng: number = 7.815982;
clickedMarker(label: string, index: number) {
console.log(`clicked the marker: ${label ||
index}`)
}

16. markers array
set the zoom level
default latitude and longitude
click marker event
Now, moving forward in Angular Google
Maps tutorial to configure the app
component. In the app component, we have
added

17. markers = [
{
lat: 51.673858,
lng: 7.815982,
label: "A",
draggable: true
},
{
lat: 51.373858,
lng: 7.215982,
label: "B",
draggable: false
},
{
lat: 51.723858,
lng: 7.895982,
label: "C",
draggable: true
}
]
}

18. User Interface

19. Open the file src/app/app.component.html
and paste the following content:
<h1>Angular Google Maps (AGM)
Demo</h1>
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false" >
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="clickedMarker(m.label,
i)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label"

20. [markerDraggable]="m.draggable">
<agm-info-window>
<strong>Label: {{m.label}}</strong><br/>
<strong>Latitude: {{m.lat}}</strong>
<br/>
<strong>Longitude: {{m.lng}}</strong>
</agm-info-window>
</agm-marker>
</agm-map>
Open the file src/app/app.component.css
and paste the following code.
agm-map {
height: 500px;
}

21. Run the
Application

22. Use the below command in the project root
folder to run the application.
npm start
Then, open the following URL in your
browser: http://localhost:4200
You should see your first Google Map
created with Angular Google Maps when
everything works as expected, as shown
below.
Angular Google Maps (AGM) Demo

23. Github
Repository:
Angular
Google Maps

24. Feel free to visit the source code: angular-
google-maps. You can clone the github
repository and experiment with the code by
yourself.

25. Conclusion

26. So, this was how to integrate Angular
Google Maps in your project. I hope the
tutorial was helpful to get started with
AGM. You can always share your
suggestions or feedback with us. Visit the
Angular tutorials page to learn fundamental
and advanced Angular knowledge for more
such tutorials. Every tutorial will provide a
github repository so that you can clone and
play around with the code. Bacancy has
skilled and experienced Angular developers
with the best problem-solving skills.
Contact us if you have any queries or
requirements.

27. Thank You
www.bacancytechnology.com