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

UPDATED(26/03/19) for latest CLI 4.12.0

In this post, we will implement Geolocation and Geocoder plugins in Ionic 3 application. 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 …

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

If you see this error, don’t worry just rerun commands 🙂

 

 

 

 

 

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.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

Above code is having inline comments to explain methods, we are using Ionic Loader component here. Geolocation and Geocoder methods with configuration definitions.

Pinch of CSS styling in home.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 🙂

9
Leave a Reply

avatar
5 Comment threads
4 Thread replies
4 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
KESHAV GODANINeevanramRishJolly.exe Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Harsh Vijay Shah
Guest
Harsh Vijay Shah

NativeGeocoder is unable to assign it.

Rish
Guest
Rish

Thanks for the amazing tutorial. Very Helpful but by this method we get complete address like [Locality, City, State, CountryName].
Now how can I display only street / city name?

ram
Guest
ram

what about if i want autocomplete to work after 3 characters entered ? do you have any solution for it?
thanks by advance

Neevan
Guest
Neevan

Hey there,
Suppose we have a map with a draggable marker on it & as soon as the user drags the marker and place anywhere the marker should generate the new location and display the new location’s formatted address.

How can we do that? Can you make a tutorial on that please?

Rish
Guest
Rish

Using Ionic 3 Framework

KESHAV GODANI
Guest
KESHAV GODANI

Cannot find name ‘NativeGeocoderReverseResult’.

[17:55:17] typescript: E:/Users/RISINGBEE/git/bob-app/src/pages/cmn/login/login.ts, line: 1001
Cannot find name ‘NativeGeocoderReverseResult’.

L1000: this.nativeGeocoder.reverseGeocode(resp.coords.latitude, resp.coords.longitude, options)
L1001: .then((result: NativeGeocoderReverseResult[]) => {
L1002: this.userlocation = result[0].toString();