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.

5 thoughts on “Ionic 4 | Turn on Device GPS in Ionic 4 Application Without Leaving App using Ionic Native Plugin”

  1. Hello,
    I start on Ionic.
    I just wanted to know, if this post worked on IOS too.
    Thank you.

    Bonjour,
    Je débute sur Ionic.
    Je voulais juste savoir, si ce post fonctionnait aussi sur IOS.
    Merci

Leave a Reply

Your email address will not be published. Required fields are marked *