Uncaught (in promise): TypeError: Cannot read property 'panTo' of undefined

Ionic Framework ionic-v3
1

I am trying to panTo an area on a map by using ionic geolocation plugin and passing the argument
location but shows uncaught error.

image

code for this is

ngOnInit(){
this.getCurrentLocation().subscribe(location => {
this.map.panTo(location);
});
}

getCurrentLocation(){

let loading = this.loadingCtrl.create({
  content: 'Locating...'
});

loading.present();

let options = {timeout:10000, enableHighAccuracy: true};

let locationObs = Observable.create(observable => {

    this.geolocation.getCurrentPosition(options)
        .then(resp => {
          let lat = resp.coords.latitude;
          let lng = resp.coords.longitude;

          let location=new google.maps.LatLng(lat,lng);

          observable.next(location);

          loading.dismiss();
        },
        (err)=>{
          console.log('Error getting location'+ err);
          loading.dismiss();
  })
})

return locationObs;

}

2

Are you sure the platform is ready before you start interacting with plugins?

Incidentally, there is virtually never any need for app code to call either new Promise() or Observable.create(), and definitely not here. I don’t see why you even want an Observable here in the first place, because it’s only going to emit one value and then hang. I would just use the Promise, but if you absolutely insist, then use fromPromise().

3

I just want to know the cause of error.
Is observable.create is the one causing error.

4

Funny you should say this. I use new Promise(), in code I based on this code sample here that Promisifies a type of XMLHttpRequest I was making. It works, but I’ve wondered if there was a newer/better approach.

To the OP: How do you define this.map? That’s critical. You didn’t post the code that relates to that,.

5

Here’s what convinced me of it.

Assuming you can’t just use an already modernized HTTP client (like Angular’s Http), that’s about the only time I think explicit construction makes sense - to wrap an API that doesn’t get with the program. That’s pretty much the entire point of ionic-native.

6

I am unable to implement promise because I’m new to ionic .
Can you please help me with this existing code

import { Component,ViewChild, Input } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { LoadingController } from ‘ionic-angular’;
import { Geolocation } from ‘@ionic-native/geolocation’;
import { Observable } from ‘rxjs/Observable’;

declare var google:any;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

@Input() isPickupRequested:boolean;

@ViewChild(‘map’) mapElement;
public map;

constructor(public navCtrl: NavController,public loadingCtrl: LoadingController,public geolocation: Geolocation) {
this.isPickupRequested=false;
}

confirmPickup(){
this.isPickupRequested=true;

}

cancelPickup(){
this.isPickupRequested=false;
}

ngOnInit(){
this.getCurrentLocation().subscribe(location => {
this.map.panTo(location);
});
}

getCurrentLocation(){

let loading = this.loadingCtrl.create({
  content: 'Locating...'
});

loading.present();

let options = {timeout:10000, enableHighAccuracy: true};

 let locationObs = Observable.create(observable => {

   this.geolocation.getCurrentPosition(options)
        .then(resp => {
          let lat = resp.coords.latitude;
          let lng = resp.coords.longitude;

          let location=new google.maps.LatLng(lat,lng);

          observable.next(location);

          loading.dismiss();
        },
        (err)=>{
          console.log('Error getting location'+ err);
          loading.dismiss();
  })
})

return locationObs;

}

// Map code
ionViewDidLoad(){
this.createMap();
}

createMap(location = new google.maps.LatLng(40.712784,-74.005941)){

let mapOptions = {
  center:location,
  zoom:15,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  disabledDefaultUI:true
}
let map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

return map;

}

}

7

I’m not going to read 5 million lines of code. What is line 36 of home.ts? And you do you define map as it appears there?

8

Line 36 is
this.map.panTo(location);
in
ngOnInit(){
this.getCurrentLocation().subscribe(location => {
this.map.panTo(location);
});
}
functon

9

So the location is arriving before you define this.map. Put the subscription to the location after you define this.map. In particular, if you’re defining this.map with ViewChild, it won’t be ready until ngAfterViewInit(), which occurs after ngOnInit(). I don’t know if you need ViewChild, because I don’t understand your code. But I know that ngOnInit() is too soon, given how you are defining map right now.

10

Please edit your post and use the </> button above the post input field to format your code or error message or wrap it in ``` (“code fences”) manually. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

11

Why aren’t you using ionic-native’s google-maps?

12

Thanku all for yor help.
It worked

13

Please how did you solve this problem because i have the exact same issue

14

I think I managed to somewhat resolve this by using this.map.moveCamera(location);