CODEWITHSUNDEEP
angular
Hema Krishna
Hema Krishna

Reputation: 137

how to display multiple markers using angular google maps - angular 6

I am trying to display 2 markers on the google maps. But I am not aware of how to do it. I am able to see only one marker on the map.

Here is my map.component.html file:

<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng">
</agm-marker>
</agm-map>

Here is my map.component.ts file:

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-marker',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MarkerComponent implements OnInit {
constructor() { }
jsonObject = [
{
deviceid: 123,
source: [10.8505, 76.2711],
destination: [34.083656,  74.797371],
location: [22.5726, 88.3639],
speed: 45,
driver: 'ABC',
vehiclenumber: 'KA01R45',
vehiclebrand: 'Honda',
vehiclemodel: 'CRDI',
status: 'danger'
},
{
deviceid: 345,
source: [13.0827, 80.2707],
destination: [19.0760, 72.8777],
location: [19.7515,  75.7139 ],
speed: 60,
driver: 'DEF',
vehiclenumber: 'KA01L45',
vehiclebrand: 'Hyundai',
vehiclemodel: 'CRDI',
status: 'idle'
}
]
lat: number = 39.817490;
lng: number = -0.231035;
ngOnInit() { 
this.getMarker();
}

getMarker() {
this.lat = { lat: this.jsonObject.location[0], lng: this.jsonObject.location[1]}
this.lng = { lat: this.jsonObject.location[0], lng: this.jsonObject.location[1]}
}
}

I am iterating through jsonObject to get the location of two different objects. I want to display the latitude and longitude of location given in the json.

Upvotes: 1

Views: 2603

Answers (1)

Chellappan வ
Chellappan வ

Reputation: 27471

Use *NgFor For Multiple Marker

 <agm-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="clickedMarker(m.label, i)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"
      [markerDraggable]="m.draggable"
      (dragEnd)="markerDragEnd(m, $event)">

Example:https://stackblitz.com/edit/angular-google-maps-demo-za7bmp

Upvotes: 2

Related Questions