I am working on an Ionic app . My app is get data json api earthquake form USGS then set coordinates on google map . l'm looping over an array to create markers . Everything working fine , but when l click on any icon marker l getting duplicate title ! .
export class HomePage implements OnInit {
protected points: { lng: number, lat: number }[] = [];
items: any
pet: string = "Today";
map: GoogleMap;
mags: number;
constructor(
private http: HTTP) {
}
async ngOnInit() {
this.getData()
}
async getData() {
this.http.get(`https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson`, {}, {}).then(data => {
this.items = JSON.parse(data.data)
let earth = JSON.parse(data.data)
console.log(this.items)
for (let datas of earth['features']) {
this.points.push({ lng: datas.geometry.coordinates[0], lat: datas.geometry.coordinates[1] });
let mag = datas.properties.place
let title = datas.properties.title
/// Marker icon
let dest = this.points.map((coords) => {
return this.map.addMarker({
position: coords,
icon: this.mags_icons
title : title
}).then((marker: Marker) => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
});
});
});
this.map = GoogleMaps.create('map_canvas');
}
})
}
}
The way how markers are instantiated looks incorrect since with every iteration over feature collection, the prevision markers are getting re-created (that's my guess the reason why
title
refer to the same value).Given the example the following example demonstrates how to create markers and set
title
to refer to the proper feature ptoperty:Another option would be to utilize
map.addMarkerSync
function: