CODEWITHSUNDEEP
angulartypescriptgoogle-mapsionic-frameworkionic3
Patrick Obafemi
Patrick Obafemi

Reputation: 1066

Ionic app showing InvalidValueError not a number

I have geolocation setup in my ionic app and i want to get current location of user and display on the app but i get the following error.

InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number

Here is my home.ts code

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, LoadingController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

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

   public lat:number;
   public long: number;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public 
platform: Platform, public geo: Geolocation, public loadingCtrl: LoadingController) {
  platform.ready().then(() => {
      this.currentPositon();
      this.initMap();
  });
}



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

loading.present();

this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 18,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  center: {lat:  this.lat, lng:  this.long},
});
loading.dismiss();
}


  currentPositon()
  {
    this.geo.getCurrentPosition().then((resp) => {
    this.lat = resp.coords.latitude;
    this.long = resp.coords.longitude
  console.log(resp);
 }).catch((error) => {
   console.log('Error getting location', error);
 });
 }

}

What am i doing wrong? When i console.log resp i get the coordinates but console logging this.lat and this.long returns undefined.

Upvotes: 0

Views: 204

Answers (1)

Sunil
Sunil

Reputation: 11243

You should create the map once you get the position and you had done but there is issue with sequence of call. Its a async execution so you must ensure that initMap is once you receive the position.

You can move initMap in the callback section of currentPositon function.

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, LoadingController } from 'ionic-angular';

import { Geolocation } from '@ionic-native/geolocation';

declare var google: any;

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

   public lat:number;
   public long: number;

  @ViewChild('map') mapElement: ElementRef;
  map: any;

  constructor(public navCtrl: NavController, public 
platform: Platform, public geo: Geolocation, public loadingCtrl: LoadingController) {
  platform.ready().then(() => {
      this.currentPositon();
      // this.initMap(); <-- do not call here
  });
}



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

loading.present();

this.map = new google.maps.Map(this.mapElement.nativeElement, {
  zoom: 18,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  center: {lat:  this.lat, lng:  this.long},
});
loading.dismiss();
}


  currentPositon()
  {
    this.geo.getCurrentPosition().then((resp) => {
    this.lat = resp.coords.latitude;
    this.long = resp.coords.longitude;
    this.initMap(); //<-- init map once the position is received
  console.log(resp);
 }).catch((error) => {
   console.log('Error getting location', error);
 });
 }

}

Upvotes: 1

Related Questions