Google map marker title duplicate

Question

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');
      }

    })
  }

}

Answer 1

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:

getData() {
    this.http
      .get(
        `https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson`,{},{}
      )
      .then(data => {
        let geojson = JSON.parse(data.data);
        for (let feature of geojson["features"]) {
          let markerProps = {
            title: feature.properties.title,
            position: {
              lng: feature.geometry.coordinates[0],
              lat: feature.geometry.coordinates[1]
            }
          };

          let marker = this.map.addMarker(markerProps).then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
              //...
            });
          });
        }
      });
}

Another option would be to utilize map.addMarkerSync function:

let geojson = JSON.parse(data.data);
for (let feature of geojson["features"]) {
    let markerProps = {
      title: feature.properties.title,
      position: {
          lng: feature.geometry.coordinates[0],
          lat: feature.geometry.coordinates[1]
      }
    };

    let marker = this.map.addMarkerSync(markerProps);
    marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        //...
    });
}