Variable undefined in class is undefined when called in function


#1

export class HomePage {

@ViewChild(‘map’) mapElement: ElementRef;
map: any;
latitude: any;
longitude: any;

constructor(public navCtrl: NavController) {
}

ionViewDidLoad() {
this.loadMap();
}

loadMap() {

Geolocation.getCurrentPosition().then((position) => {
  let source = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  let mapOptions = {
    center: source,
    zoom: 17,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
  this.latitude = position.coords.latitude;
  this.longitude = position.coords.longitude;
  this.registerAutoComplete(position.coords.latitude, position.coords.longitude);
}, (err) => {
  console.log(err);
});

}

registerAutoComplete(latitude: number, longitude: number) {
let input = (document.getElementById(“destination”));
let options = {
types: [],
componentRestrictions: {country: “PK”}
};

let autoComplete = new google.maps.places.Autocomplete(input, options);

let self = this;

google.maps.event.addListener(autoComplete, 'place_changed', function () {
  let place = autoComplete.getPlace();
  let geometry = place.geometry;
  if ((geometry) !== undefined) {
    console.log(place.name);
    console.log(place.id);

    let lat = geometry.location.lat();
    let lng = geometry.location.lng();

    console.log(lat);
    console.log(lng);

    console.log(latitude);
    console.log(longitude);

    console.log(this.map);

    let source = new google.maps.LatLng(latitude, longitude);
    let destination = new google.maps.LatLng(lat, lng);

    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(this.map);
    var request = {
      origin: source,
      destination: destination,
      travelMode: 'DRIVING'
    };
    var directionsService = new google.maps.DirectionsService();
    console.log("1st check");
    directionsService.route(request, function (response, status) {
      if (status == 'OK') {
        console.log(status);
        directionsDisplay.setDirections(response);
        console.log(response);
      }
    });
  }
});

}
}

This is my code variable map that is declared globally is undefined inside maps event listener, I am new to ionic please guide me.


#2

Hi man!
Probably this variable isn’t filled because your promise still not finished yet!

Take a look in the GetCurrentPossition method and see if the map variable was filled. And also put validation in addListener and see if the map is filled!

I’m new too…so i hope help you


#3

Why aren’t you using ionic-native?


#4

I am new to ionic and dont know about it


#5

I think this is the mistake. How to fix it ?