**Ionic Geolocation: **In this tutorial, I'm going to teach you, "How to access user's location by using Ionic Native (cordova-plugin-geolocation)" & Display locations on UI
Technology used:
Step 1: Create New Ionic project
ionic start GeoDemo blank
Step 2: Add plugin
ionic cordova plugin add cordova-plugin-geolocation --variable GEOLOCATION_USAGE_DESCRIPTION="To locate you"
npm install --save @ionic-native/geolocation
Step 3: import plugin into src/app/app.module.ts
import { Geolocation } from '@ionic-native/geolocation';
Declare in providers
providers: [
StatusBar,
SplashScreen,
Geolocation,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Step 4: Work with home.ts
for accessing geolocation
export class HomePage {
lat: any;
lng: any;
constructor(public navCtrl: NavController, public geo: Geolocation) {
}
ionViewDidLoad(){
this.geo.getCurrentPosition().then( pos => {
this.lat = pos.coords.latitude;
this.lng = pos.coords.longitude;
}).catch( err => console.log(err));
}
}
Step 5: Display variables on home.html
Lat: {{ lat }}
Lang: {{ lng }}