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



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



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, 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 file

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

Pinch of CSS styling in

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 🙂

Leave a Reply

9 Comment threads
6 Thread replies
Most reacted comment
Hottest comment thread
8 Comment authors
LeonardoAsifCoreyeden rosaaJolly.exe Recent comment authors
newest oldest most voted
Notify of
Jaydeep Rathod

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


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


Hi, Can i test without build application.


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

eden rosaa
eden rosaa

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


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


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

error ts2305 module has no exported member NativeGeocoderReverseResult


boa tarde, é que ta dando um erro pra mim na pagina 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