Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

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 places   angular   google map location   javascript  

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. Node JS. To install node js please click here.
  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 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

0replies
Leave a reply
49
Registerd Users
92
Total Subscribers
59
Total Articles
60891
Total Views