Ionic 5 Geolocation Native Plugin Tutorial

Ionic Geolocation Native Plugin Example Tutorial

Compatible with Ionic 4 & 5 Angular

Using Ionic’s Geolocation native plugin we can get current coordinates and other information like accuracy, speed, timestamp, altitude etc.

Let’s check how to install Geolocation Native plugin in Ionic Angular application.

Install Geolocation Plugin

Run following NPM commands in project root using the terminal window:

Import in App Module

To use the Geolocation plugin, open app.module.ts file to import the Geolocation class then update the imports array as shown below:

Use Geolocation

In the home.page.html add a button to call getCoordinates() method and a list to watch location changes by looping the locationTraces object using *ngFor directive.

Now in the home.page.ts file import Geolocation to use its methods getCurrentPosition() which returns the current device coordinates with other information:

The watchPosition() method keeps the track of changes in device location and returns the coordinates object when locations change.

In the locationTraces current and updated location will be pushed to show in list.

Leave a Reply

avatar
  Subscribe  
Notify of