Ionic google maps polyline undefined

@aligassan wrote:

I am trying to get latitude and longitude from data json api for flight route and that data json api content arrays , you can see link below . l want to display on google map polyline flight route, but l get error when run app

 ERROR TypeError: Cannot read property 'latitude' of undefined
    at Object.eval [as updateRenderer] (ng:///HomePageModule/HomePage.ngfactory.js:23)
    at Object.debugUpdateRenderer [as updateRenderer] (vendor.js:57761)
    at checkAndUpdateView (vendor.js:57136)
    at callViewAction (vendor.js:57372)
    at execComponentViewsAction (vendor.js:57314)
    at checkAndUpdateView (vendor.js:57137)
    at callViewAction (vendor.js:57372)
    at execEmbeddedViewsAction (vendor.js:57335)
    at checkAndUpdateView (vendor.js:57132)
    at callViewAction (vendor.js:57372)
View_HomePage_0 @ ng:///HomePageModule/HomePage.ngfactory.js:19

full code

export class HomePage{
  map: GoogleMap;
  latitude: any;
  longitude: any;
  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.loadMap();

    this.http.get('xxxxx/common/flight.json?flightId=08f9',{},{})
    .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.longitude

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

    })
  }

  loadMap() {
    let AIR_PORTS = [
      this.latitude,
      this.longitude,
    ];

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

}

l have too long data json response so i putted in link

Your help would be much appreciated.

Posts: 1

Participants: 1

Read full topic