HTTP google maps Polyline - json

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