How to push array in Google map

#1

I have a Ionic App using google maps. 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 for my data json . l want to display that json arrays on google map polyline, but l get error when run app .

ERROR Error: Uncaught (in promise): TypeError: Cannot use 'in' operator to search for 'getPosition' in undefined
TypeError: Cannot use 'in' operator to search for 'getPosition' in undefined
    at getLatLng (plugins/cordova-plugin-googlemaps/www/Common.js:544)
    at Array.map (<anonymous>)
    at Object.convertToPositionArray (plugins/cordova-plugin-googlemaps/www/Common.js:575)
    at Map.addPolyline (plugins/cordova-plugin-googlemaps/www/Map.js:1231)
    at vendor.js:76340
    at GoogleMap.push../node_modules/@ionic-native/google-maps/index.js.GoogleMap.addPolylineSync (vendor.js:76352)
    at HomePage.push../src/app/home/home.page.ts.HomePage.loadMap (home-home-module.js:126)
    at home-home-module.js:114
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (polyfills.js:2749)
    at Object.onInvoke (vendor.js:51123)
    at resolvePromise (polyfills.js:3189)
    at polyfills.js:3254
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2781)
    at Object.onInvokeTask (vendor.js:51114)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (polyfills.js:2780)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (polyfills.js:2553)
    at drainMicroTaskQueue (polyfills.js:2959)

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.getmarker();


  }

  getmarker(){
    this.http.get('xxxxxxx/v1/flight.json?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.longitude
      console.log(this.latitude,this.longitude)

      this.loadMap()
    })
  }

  loadMap() {


    let HND_AIR_PORT = this.latitude;
    let SFO_AIR_PORT = this.longitude

    let AIR_PORTS = [
      HND_AIR_PORT,
      SFO_AIR_PORT
    ];

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

my data json api url

Your help would be much appreciated.

#2

It does not appear that you are awaiting for platform.ready()'s promise to resolve itself. Try modifying it to this this.platform.ready().then(()=>
{
this.getmarker();
});

#3

Thank you for replyed , read the error , the problem is with arrays coming from data json api . l dont know how to convert object to array . check my data json url https://jsoneditoronline.org/?id=4adce21191d047f4a008d31db1d5ee22

#4

Gotcha.

In looking at the data, track is made up of an array of objects. You should be able to use forEach to move through the array.

If I were you, I’d investigate casting the result to a class that you create that matches the response from the API. Doing so will greatly reduce the amount of code that you have to type and make things much cleaner.

#5

can you please do it for me how to do that please ? l just want how to get arrays from that data json then put it in google map

#6

I would but I have my own code that I have to write.

Why don’t you try using the .forEach approach initially. Once you get that working, I can help you with creating the class and casting your response.

#7

that the problem is , l am beginner , l need example or way similar to my problem even l can fix it ,

#8

JSON.parse(data.data).result.response.data.flight.track.forEach(myTrack=> {
//handle adding items to map here
});

Look into using HttpClient instead of Http from Angular. It will automatically convert the response to JSON.

#9

l did like that, but nothing to show in console !

  JSON.parse(data.data).result.response.data.flight.track.forEach(myTrack=> {
      
    console.log(myTrack,this.latitude = myTrack.latitude)
    this.latitude = myTrack.latitude
    this.longitude = myTrack.longitude

    //handle adding items to map here
    });
#10

Are you using Angular’s HTTP client?

#11

l am using http native for cross

#12

It must return a promise instead of an observable.

#13

Even l did like that but nothing to show in console

   JSON.parse(data.data).result.response.data.flight.track.array.forEach(element => {

        console.log(element)
      });
    
#14

I’d clean the code up by declaring a variable of type any right above the line that says constructor.

Then, I would assign the value of the variable equal to JSON.parse(data.data).

This will allow you to more easily debug and process the data.

Once you have done the above, do a console.log of that variable and see if it looks like the data from the website link.

#15

finally l did it :heart_eyes: , l get the response from data json with objects

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

now how can push into google map ?

#16

l did it like that

 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)
        // Do something.
      }



    })

  }

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

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

but l get error is

ERROR Error: Cannot find a differ supporting object '33.265625' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
#17

@danieldugger any idea please ?

#18

Here is an example of code that I use. I do not use a plugin for Google Maps. I followed Josh Morony’s tutorial on adding Google Maps to an Ionic Project.

let myModal = this.modalCtrl.create(MapMarkerFilterPage,{Addresses:this.Addresses});
myModal.onDidDismiss(data =>{
this.Addresses=data;
if (this.Addresses.length >0)
{
var indexOfMarker;

    this.Addresses.forEach(element => {
      switch (element.ShowMarkerOnMap)
      {
        case true:
          indexOfMarker=this.Markers.findIndex(item => item.ID==element.ID);
          if (indexOfMarker==-1)
          {
            switch (element.AddressType)
            {
              case 'Check-In':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/symbolcheck.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Bond Application':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/home.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Cosigner':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/usergroupdiverse.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Bond Party':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/usergrouphome.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Employer':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/usergrouplabor.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Additional Map Marker':
                this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/pushpin.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                this.AddAddressDetailsToMarker(this.myMarker,element);
                this.Markers.push(this.myMarker);
                break;
              case 'Social Media Account':
                switch (element.SocialMediaAccountType)
                {
                  case 'Facebook':
                    this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                    this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/facebook.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                    this.AddAddressDetailsToMarker(this.myMarker,element);
                    this.Markers.push(this.myMarker);
                    break;
                  case 'Instagram':
                    this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                    this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/instagram.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                    this.AddAddressDetailsToMarker(this.myMarker,element);
                    this.Markers.push(this.myMarker);
                    break;
                  case 'Twitter':
                    this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                    this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/twitter.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                    this.AddAddressDetailsToMarker(this.myMarker,element);
                    this.Markers.push(this.myMarker);
                    break;
                  case 'Tumblr':
                    this.myLocation = new google.maps.LatLng(element.Latitude, element.Longitude);
                    this.myMarker = new google.maps.Marker({ icon: 'assets/imgs/tumblr.png', position: this.myLocation, map: this.map,title: element.AddressType, ID: element.ID});
                    this.AddAddressDetailsToMarker(this.myMarker,element);
                    this.Markers.push(this.myMarker);
                    break;
                }
            }
            
          }          
          break;
        case false:
          indexOfMarker=this.Markers.findIndex(item => item.ID==element.ID);
          if (indexOfMarker >-1)
          {
            this.Markers[indexOfMarker].setMap(null);
            this.Markers.splice(indexOfMarker,1);
          }
          
          break;
      }

    });

  }
  else
  {
    if (this.Markers.length >0)
    {
      this.Markers.forEach((element,index) => {
        this.Markers[index].setMap(null);
        this.Markers.splice(index,1);
      });
    }

  }

});
myModal.present();
#19

You could use

polyline.addListener(‘click’, ()=> {

});

to show your InfoWindow