Ionic 4 | Get Device Latitude, Longitude and Address using Geolocation and Native Geocoder Services in Ionic 4 Native Application

Updated for Stable Ionic 4 Release( 22-03-2019 )

Previously we implemented Geolocation and Geocoder plugins in Ionic 3 application, In this post, we will create an application in latest Ionic version 4 beta. Using Geolocation service we can get Lattitude, Longitude, Accuracy of location, Speed, Altitude etc of the device. After that Latitude and Longitude can be used to get Addresses available on these coordinates. To fetch address from coordinates of the device, we use Geocoder service.

Here we will discuss on How to use Geolocation and Geocoder in Ionic 3 

So, let’s begin …

Also Check: Ionic 4 | Turn on Device GPS in Ionic 4 Application Without Leaving App

Before we start with application make sure that your system is having an updated version of NodeJS installed.

Create a new Ionic Application

Install latest version of Ionic and Cordova CLI.

Now we will create a new blank application

 

After the application is created, go to the root using the CD command

If your system is having Visual Studio code(VS Code) installed, use  $ code .  command to open the project in VS Code

Install the Cordova and Ionic Native plugins

Geolocation

 

This plugin will use device location service to fetch latitude, longitude, accuracy, altitude, altitudeAccuracy, altitudeAccuracy, heading, speed

Geocoder

 

It will return address for provided coordinates, and also do reverse geocoding.

Add this plugin in the application’s module file

In app.module.ts, import plugin and add in imports array.

 

In home.page.html, add following HTML

Here we have three buttons to fetch location coordinates, Watch location updates and stop location updates. After successfully fetching we are showing information returned.

Update component with methods

Replace below code in home.page.ts file

Above code is having inline comments to explain methods. Geolocation and Geocoder methods with configuration definitions.

Pinch of CSS styling in home.page.scss

That’s it you can now test your application in a real device after building apk using this command $ ionic cordova build android 

Let me know if you face any issue in implementing this

Happy coding 🙂

20
Leave a Reply

avatar
12 Comment threads
8 Thread replies
15 Followers
 
Most reacted comment
Hottest comment thread
13 Comment authors
louloulfxWuAnshyni sGian Michelmanzoor Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jaydeep Rathod
Member

Hello, make topic on exit app in ionic 4 please 🙂

David
Guest
David

I’ve tried this but I get an error of [object PositionError] when I run it on a device

Arthi
Guest
Arthi

Hi, Can i test without build application.

Arthi
Guest
Arthi

Hi. I receiving this error “Cannot read property ‘address’ of undefined”

eden rosaa
Guest
eden rosaa

hi, can the code above integrated with google maps ? for example, the lat and long convert to markers in Gmaps.

Corey
Guest
Corey

I keep getting and error:
[ERROR] An error occurred while running subprocess cordova.

I’ve installed the latest cordova and have the Android build tools I don’t understand where to go now

Asif
Guest
Asif

Can you please help me? I have got the error mention below

error ts2305 module has no exported member NativeGeocoderReverseResult

Leonardo
Guest
Leonardo

boa tarde, é que ta dando um erro pra mim na pagina home.page.ts a importação do NativeGeocoderReverseResult ele fica com uma barra vermelha (
import { NativeGeocoder,NativeGeocoderOptions,NativeGeocoderReverseResult } from ‘@ionic-native/native-geocoder/ngx’; )com isso não consigo usar ele no aplicativo, por favor preciso disso o mais rapido possivel, desde já muito obrigado

Gian Michel
Guest

Hi, to fix that is pretty simple, i have to test it, but i think it will works:
instead of using NativeGeocoderReverseResult, use NativeGeocoderResult and NativeGeocoderResult[].

What have happened is that this method has being agrouped with forwardResult inside GeocoderResult

manzoor
Guest
manzoor

Hi Freaky Jolly,

I’m not able to import ‘NativeGeocoderReverseResult’,
Attach for screenshot

shyni s
Guest
shyni s

Please help me .. what argument should i pass to getCurrentPosition() and watchPosition() method ..please reply .
Iam using ionic 4

WuAn
Guest
WuAn

i have this issue too. I use getCurrentPositon but result {}.

louloulfx
Guest
louloulfx

It works for IOS ?, i don’t have apple