Ionic 4 | Turn on Device GPS in Ionic 4 Application Without Leaving App using Ionic Native Plugin

In Ionic Application which is using Geolocation get device location coordinates like latitude and longitude may need more accuracy. Device Geolocation service can location coordinates using the network, WiFi Bluetooth but for more accurate location device GPS option must be turned on, which can provide Location accuracy up to 10m which proves quite good for real-time and delivery applications.

In this post, we will discuss How to Turn on Device GPS option from Ionic 4 Application itself, so that user does not need to leave application. We will use Cordova and Ionic Native plugin, which will prompt the user to turn on GPS.

Let’s get started!

Create a new Ionic 4 Application

Make sure you have latest Ionic CLI installed

Create a new blank template Ionic 4 application

 

Install Plugins for Application

Here we will create a new Ionic 4 application which will have three plugins which will help to provide more user-friendly behavior.

cordova-plugin-android-permissions: Get permissions by showing the permission dialogue. We will use this plugin to get Geolocation access permission, but this can be used for any type of permission.

 

cordova-plugin-request-location-accuracy: Shows a dialogue to the user to turn on GPS we show in the image below so that the user does not need to leave the app or go to setting.

 

cordova-plugin-geolocation: Finally after getting location access permission and turning on device GPS, we will fetch accurate device Geolocation coordinates using this Geolocation plugin.

 

Next, we need to inject these plugin in the app.module.ts file then add in providers array

Now we will use these in the application’s home component. In the home.component.ts file, we will add the following methods.

Check if the application is having permission to access device location by calling below method checkGPSPermission()

If not then we will call requestGPSPermission() method to get location permission on the fly from the user.

If the application is having location access permission then we will call askToTurnOnGPS() method. This is the method for which we are here 😛 this show GPS turn on dialogue in application

After the user successfully turns on GPS then we will call getLocationCoordinates() method to get an accurate location of the device.

After adding the above methods our complete Home Component ts file will look like this

In Home components’ HTML template we will just have a button which will call checkGPSPermission method which we added in ts file above and also show Geolocation Coordinates received back.

That’s it, in the above tutorial we got to know How to get user device Geolocation permission with more accuracy by turning on device GPS after providing Geolocation permission to an application.

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
TakerDavid Lopez Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
David Lopez
Guest
David Lopez

I can “refresh” the data showed in the app, how can i do that?
can you help me?

David Lopez
Guest
David Lopez

sorry, i meant “can’t”

Taker
Guest

Hi David, you can add a button in your home.pqge.html and set getLocationCoordinates() to click event. Like this:

Refresh location

Taker
Guest

Hi, just want Thank You for all your tutorial !!