Add multiple location markers into google map using AGM into angular app

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

1. Install Node JS.

2. Angular CLI to install angular cli in your system follow this article.

3. Bootstrap 4. to install bootstrap, click here.

4. 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 help 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.