Share with
How to add multiple location markers into google map using google marker into angular app
Here we are install google map using @agm/core and add multiple location or places markers into google map. Example add multiple hotels into near distance.
Google Map
Google maps are used to get or set location using marker in map. This application we can used in angular 4+ version using package @Agm/Core module. By installing this we can integrate google map into our angular website.
Prerequisite
- Node JS. To install node js please click here.
- Angular CLI to install angular cli in your system follow this article.
- Bootstrap 4. to install bootstrap click here.
- Install Google Maps i.e. @Agm/Core. to add google map using article click here.
Example for multiple display Places into Google Map using Google Marker
Into previous article we are learn how to add google map into angular app. If you do not see how we implement google map into angular app. Please read this article.
Add google maps with add marker getting current location using @agm/core module in angular framework
Follow this article to install google map and integrate simple google map into your angular app.
In Previous tutorial we seen google map template using getting current location into angular app like this
HTML Code
// src > app > app.component.html
<div class="googlemap"><!-- app.component.html --><agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"><agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker></agm-map>
</div>
CSS Code
// src > app > app.component.css
agm-map {
height: 500px;
}
.googlemap{
margin-top: 5%;
}
TS Code
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title: string = 'Google Map Project';
latitude: number;
longitude: number;
zoom:number;
ngOnInit() {
this.setCurrentLocation();
}
// Get Current Location Coordinates
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 15;
});
}
}
}
This will helps you to set marker into google map to your current location.
Now we see how wee can add multiple markers to adding the multiple restaurant location into the google map.
Just change the HTML code and TS code
// src > app > app.component.html
<div class="googlemap">
<!-- app.component.html -->
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
<agm-marker *ngFor="let marker of restaurant_list; let i = index" [latitude]="marker.latitude"
[longitude]="marker.longitude" [label]="marker.name">
</agm-marker>
</agm-map>
</div>
In the above code we use for loop to add multiple markers into google map
// src > app > app.component.ts
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
title: string = 'Google Map Project';
latitude: number;
longitude: number;
zoom:number;
restaurant_list = [
{
id : 1,
name : 'Maharaja Hotel',
latitude : 20.016112,
longitude :73.737208
},
{
id : 2,
name : 'Peshwa Hotel',
latitude : 20.013092,
longitude :73.748969
},
{
id : 3,
name : 'Aroma Hotel',
latitude : 20.014112,
longitude : 73.713951
},
]
ngOnInit() {
this.setCurrentLocation();
}
// Get Current Location Coordinates
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
this.zoom = 15;
});
}
}
}
Here we only added collection of hotel list objects into the array.
Output of the following list of hotel markers into map
Leave a reply

Sign in to stay updated on your professional world.
Pro Code Programming
Share and learn to code!
Programming articles, which helps you to build your application.
If something you are stuck to code and complete the program, just find here your quetion related articles.
New to Pro Code Programming?