In the digital age, location plays a very important role in mobile applications. By using Whatsapp, you easily share your location instead of explaining the direction. Ola and Uber's app mainly relies on the location to provide riding services. Most of the online business mobile application uses the location service, to provide a better user experience.

In this tutorial, I am going to explain, how to get the current location using the geolocation plugin of Ionic 4. It's a straight forward tutorial.  You can get the location in a few steps.

Preview of Android(Geolocation Example Using Ionic 4):

Step1:
Create a new Ionic 4 project using the below command, if you have not created one.

ionic start location blank
cd location

Step2:
Install the Ionic 4 Geolocation plugin using the below command.

ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation

Step3:

Import the geolocation class to the app.module.ts file

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

And include the Geolocation class to the provider.

providers: [Geolocation,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

The above step is mandatory. If you skip this step, you will end up with some error like no provider for geolocation

Step4:
Import the geolocation class to the home.page.ts file

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

Create an object reference for the Geolocation class.

constructor(private geolocation: Geolocation)
{
}

Create a function and call the getCurrentPosition() function of geolocation class.

this.geolocation.getCurrentPosition(
{maximumAge: 1000, timeout: 5000,
 enableHighAccuracy: true }
).then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      //alert("r succ"+resp.coords.latitude)
      alert(JSON.stringify( resp.coords));

      this.lat=resp.coords.latitude
      this.lng=resp.coords.longitude
      },er=>{
        //alert("error getting location")
        alert('Can not retrieve Location')
      }).catch((error) => {
      //alert('Error getting location'+JSON.stringify(error));
      alert('Error getting location - '+JSON.stringify(error))
      });

The lat and lng variable will be used to display the location on the html file.

Step5:
Create a button in the home.page.html file and add a click event to the button and call the above function.

  <ion-button (click)="getLoc()" expand="block">Get Location</ion-button>

  <ion-list>
    <ion-list-header>
      <ion-label>Location Info</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label>
        Latitue
      </ion-label>
      <ion-badge slot="end">{{lat}}</ion-badge>
    </ion-item>
    <ion-item>
      <ion-label>
        longitude
      </ion-label>
      <ion-badge slot="end">{{lng}}</ion-badge>
    </ion-item>
    </ion-list>

Here I displaying the output in a list format using the lat and lng variable.

That's all. Now you can deploy this app to your mobile and check it.

Deploy App:
To deploy it to your mobile, use the below command.

ionic cordova platform add android
ionic cordova run android --aot

If your mobile is connected via USB, then above command will create an APK and deploy it to your device.

Tested APK:
I have tested the above code on my device and released that apk to github. You can download and install the apk using the below link.

https://github.com/bharathirajatut/ionic4/raw/master/geolocation(latitude%2Clongitude)-example/app-debug.apk


Get the full source code for this example using the below link.

https://github.com/bharathirajatut/ionic4/tree/master/geolocation(latitude%2Clongitude)-example