How to push array in Google map

aligassan · April 6, 2019, 4:50pm

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.

danieldugger · April 7, 2019, 6:00pm

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

aligassan · April 7, 2019, 6:22pm

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

danieldugger · April 7, 2019, 6:34pm

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.

aligassan · April 7, 2019, 6:54pm

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

danieldugger · April 7, 2019, 7:09pm

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.

aligassan · April 7, 2019, 7:11pm

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

danieldugger · April 7, 2019, 7:19pm

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.

aligassan · April 7, 2019, 7:26pm

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

danieldugger · April 7, 2019, 7:35pm

Are you using Angular’s HTTP client?

aligassan · April 7, 2019, 7:35pm

l am using http native for cross

danieldugger · April 7, 2019, 7:36pm

It must return a promise instead of an observable.

aligassan · April 7, 2019, 7:38pm

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

danieldugger · April 7, 2019, 7:52pm

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.

aligassan · April 7, 2019, 7:53pm

finally l did it , 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 ?

aligassan · April 7, 2019, 7:58pm

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.

aligassan · April 8, 2019, 12:07pm

@danieldugger any idea please ?

danieldugger · April 8, 2019, 12:29pm

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

danieldugger · April 8, 2019, 12:49pm

You could use

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

});

to show your InfoWindow

Topic		Replies	Views
HTTP google maps Polyline Ionic Framework	0	1226	April 8, 2019
Ionic Google maps Can not find the element [#map_canvas] Ionic Framework	7	2935	April 20, 2019
Google maps API error ionic-v3	3	3580	June 8, 2023
Drawing google maps polylines by clicking Ionic Framework	0	1393	August 2, 2020
How to "get directions" using Google Maps in Ionic app? Ionic Framework	1	756	October 5, 2020

How to push array in Google map

Related topics