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.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

9
Leave a Reply

avatar
7 Comment threads
2 Thread replies
8 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
sudin mondalanRoswellNkweJoel SulcaRodolphe33 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 !!

Rodolphe33
Guest
Rodolphe33

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

Joel Sulca
Guest
Joel Sulca

is it compatible with Ionic 3? Thanks!

Nkwe
Guest
Nkwe

Hello my name is Nkwe from South Africa i just want to take this time to thank from the bottom of my heart for this awesome tutorials i really do appreciate it. Thank you very much God Bless You and i mean it.

anRoswell
Guest

Caballero muchas gracias por este Post no sabes ni cuanto me ayudo, excelente

sudin mondal
Guest
sudin mondal

Thank you very much for awesome tutorial.you are great.