HTTP google maps Polyline

Question

I have a Ionic App using google maps . I am trying to get latitude and longitude from data json api for flight route then inject that data arrays to Google Maps polyline . Fetch data json api working fine without problem , but when l put objects inside Google Maps l get error

ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'getPosition' in 40.11882
TypeError: Cannot use 'in' operator to search for 'getPosition' in 40.11882
    at getLatLng (Common.js:544)
    at Array.map (<anonymous>)
    at Object.convertToPositionArray (Common.js:575)
    at Map.addPolyline (Map.js:1231)
    at vendor.js:76340

my code

export class HomePage{
  map: GoogleMap;
  latitude: any;
  longitude: any;
  dates=[]
  constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private http: HTTP
    ) { }

  ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    this.platform.ready();
    this.getmarker();
     this.loadMap();


  }

  async getmarker(){
       this.http.get('/v1/flightjson?flightId=201',{},{})

    .then( data=>{

      // this.latitude = JSON.parse(data.data).result.response.data.flight.track.latitude
      // this.longitude = JSON.parse(data.data).result.response.data.flight.track

      for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
        this.longitude = datas.longitude
        this.latitude  = datas.latitude

        console.log(this.longitude, this.latitude)
      }




    })

  }

  loadMap() {


    let AIR_PORTS = [

      this.longitude = datas.longitude
        this.latitude  = datas.latitude

    ];
    console.log(AIR_PORTS)


    this.map = GoogleMaps.create('map_canvas');

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }
}

console log for AIR_PORTS

my data json url

original code

export class PolylinePage implements OnInit {

  map: GoogleMap;

  constructor(private platform: Platform) { }

  async ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    let HND_AIR_PORT = {lat: 35.548852, lng: 139.784086};
    let SFO_AIR_PORT = {lat: 37.615223, lng: -122.389979};
    let HNL_AIR_PORT = {lat: 21.324513, lng: -157.925074};
    let AIR_PORTS = [
      HND_AIR_PORT,
      HNL_AIR_PORT,
      SFO_AIR_PORT
    ];

    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: AIR_PORTS
      }
    });

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }

}

Answer 1

i think the way you are reading data and passing data to the GoogleMap is incorrect, Please try the following

export class HomePage{
  map: GoogleMap;
  points: {lng: number, lat: number}[] = [];

  constructor(
    public toastCtrl: ToastController,
    private platform: Platform,
    private http: HTTP
    ) { }

  ngOnInit() {
    this.platform.ready();
    this.getmarker();
    this.loadMap();
  }

  async getmarker(){
       this.http.get('/v1/flightjson?flightId=201',{},{})

    .then( data=>{

      for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
        this.points.push({lng: datas.longitude, lat: datas.latitude});
      }
    })
  }

  loadMap() {


    let AIR_PORTS = this.points;
    console.log(AIR_PORTS)


    this.map = GoogleMaps.create('map_canvas');

    let polyline: Polyline = this.map.addPolylineSync({
      points: AIR_PORTS,
      color: '#AA00FF',
      width: 10,
      geodesic: true,
      clickable: true  // clickable = false in default
    });

    polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
      let position: LatLng = <LatLng>params[0];

      let marker: Marker = this.map.addMarkerSync({
        position: position,
        title: position.toUrlValue(),
        disableAutoPan: true
      });
      marker.showInfoWindow();
    });
  }
}

you can find a working example here which i tried with your data - Example Demo. And code from here Example Code