[Solved] Loop json objects keys to add Google Maps data

by


The issue with point variable beacause it is an array of point details. You have to add all markers one by one and here I am indicating the exact place where you have the issue.

let marker: Marker = this.map.addMarkerSync({
    title: 'Ionic',
    icon: 'blue',
    animation: 'DROP',
    position: this.point    // issue in here because trying to make the position by an array
});

The solution is to define a function to add markers by going through each point in point array and I am renaming it to points for the solution because it is meaningful.

// You can use forEach as well on points
for(var i = 0; this.points.length; i++){
    addMarker(points[i]);
}

addMarker(point: any){
    return this.map.addMarkerSync({
        title: 'Ionic',
        icon: 'blue',
        animation: 'DROP',
        position: point
    });
}

Full code is updated as follows,

import { HttpClient } from '@angular/common/http';

export class HomePage implements OnInit {

      points: Array<any> = [];
      Data: any;
      map: GoogleMap;

      constructor(private http: HttpClient) { }

      ngOnInit() {
        this.loadMap();
        this.getData();
      }

      loadMap() {
        this.map = GoogleMaps.create('map_canvas');
      }

      getData() {
        this.http.get("<URL>").
          subscribe((data) => {
            this.Data = JSON.parse(data.data);
            this.points = Object.keys(this.Data)
              .map(key => this.Data[key].airport.position)
              .map((position) => ({
                lat: position.latitude,
                lng: position.longitude
              }));
            this.points.forEach((point) => {
              this.addMarker(point);
            });
          });
      }

      addMarker(point: any) {
        return this.map.addMarkerSync({
          title: 'Ionic',
          icon: 'blue',
          animation: 'DROP',
          position: point
        });
      }   

}

3

solved Loop json objects keys to add Google Maps data