Ionic 2 – Geolocation and Geocoding

Hi Friends,

Hope you are all well. In this post let’s discuss about Geolocation and Geocoding in your Ionic 2 apps.

One of the more commonly used features in almost all mobile apps nowadays is location based services. i.e., we identify the location of the user and provide services to him accordingly. So to find the location of a particular user anywhere on the face of the earth is to get the latitude and longitude of where he is located and then try to decide the location using those coordinates.

We use the Geolocation plugin to get the latitude and longitude of the location where the devices is present, we then use the geocoding plugin to perform a reverse geocoding wherein we pass the latitude and longitude to get the name of the place. Let’s see how to do this in a simple way.

Let’s begin.

A screencast of this post


Complete code of this post is available here.

First let’s scaffold out an ionic 2 app using the cli.

We now need 2 plugins to perform the task. So let’s go ahead and install them.

Now since Ionic native 3.1.x it is required to install the wrappers for these plugins as well.

Now open up app.module.ts and modify it as shown below.

We will just have one button on the homepage which upon clicking will show us the location or the country name in a toast.

Open up home.html and add the below code inbetween the <ion-content> tags.

Open up  home.ts and modify it as shown below.

We are simply using the geolocation.getCurrentPosition() to get the latitude and longitude coordinates of the device’s location and then passing it along to getcountry().

In getcountry() we are simply performing a reversegeocoding and then passing the country name to a toast.

(Forward Geocoding means to pass the name of a location and get it’s latitude and longitude coordinates whereas reverse geocoding implies the opposite).

Now run the app on your device and you should see the name of the country you live at present on your mobile device.

So far so good., but assume that your location settings in your mobile is turned off. Now if you click on the button, it doesn’t even throw up an error right ? We need to fix this too.

To request the user to turn on his location settings in that case, we have another plugin called location-accuracy that we could use.

To install the location-accuracy plugin simply type in the below command in your terminal.

Install the native wrapper as well using the below command.

Now open up app.module.ts and add this plugin as well. The final app.module.ts file would look as shown below.

Open up home.ts file and modify it as shown below.

If the location is not turned on, we show up a prompt requesting the user to turn it on, once the location settings are turned on then we can simply use the geolocation and geocoding plugins to get the location of the user.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Thanks for reading; peace.. :)


Liked it? Take a second to support admin on Patreon!
  • Sagar Deshmukh

    Hello, Raja, We need your guidance refining an application for a competition. We can’t post the details here for now. Is there somewhere I can contact you?

  • mansoor

    i followed your tutorial it helped me lot but im working on one app i need to draw the route between user current location and destination im new to ionic im not getting how to do it plz help me your help will be life saver for me

    • Purple Edge

      If you open Google Maps native with the destination as a marker, the user can click on the marker and Google navigator will open and plot the path for you.

  • Purple Edge

    Great post, thank you very much. I am finding the native-geocoder is returning a lot of misses on valid addresses. e.g. 15 Beach Rd, Collaroy NSW 2097, Australia is not found, yet it exists in Google Maps…,+Collaroy+NSW+2097

    and google maps api…,%20Collaroy,%20NSW,%20Australia

    So I’m wondering if using the api might be a better solution??

  • Hi,
    Cli commande have changed :
    ionic cordova plugin add cordova-plugin-geolocation
    ionic cordova plugin add cordova-plugin-nativegeocoder

  • проект Автоматизаци

    Thank very much.

  • Neeraj Tiwari

    its not working in ionic 3 i have try

  • Sonali Yadav

    how can we get permission by user if permision is not allowed ??

    • shantanu

      use cordova diagnostics to check and get permission

      • Vijay Chauhan

        how can check and get permission in cordova??

    • Vijay Chauhan

      hi have you solved ur problem

  • Sonali Yadav

    by using this in my app it shows error PositionError {code: 2, message: “application does not have sufficient geolocation permissions.”}
    for emultor but works well in ionic serve

  • Viswa Nath

    why am i getting this error .?? can any one assist me please…??
    NullInjectorError: No provider for ApplicationInitStatus!

    • Iman Saeed

      you need to add these to your app.module.ts:

      1) import { HttpModule } from ‘@angular/http’;
      2) imports: [
      BrowserModule, HttpModule,
      IonicModule.forRoot(MyApp) ],
      3) add in providers HttpModule

      Also, you need to add these in your file.ts

      1) import { BrowserModule } from ‘@angular/platform-browser’;
      import { ConnectionBackend } from ‘@angular/http’; // solution for another error after this
      2) providers: [[BrowserModule],[ConnectionBackend]]

  • Bibin George

    Unexpected value ‘HTTP’ imported by the module ‘AppModule’. Please add a @NgModule annotation.

    m getting this error what shld ido …plzz help

    • Samridhi Monga

      in app.module.ts:
      import {HttpModule} from ‘@angular/http’

      and add HttpModule to providers

      • Bibin George

        thank you so much maam

  • Bhagavathy Athi

    i am getting an error google is not defined..
    Note: this is an hybrid app (ionic2)
    can anyone help me please.

  • Vijay Chauhan

    Hi i am getting error look like this…

    Property ‘countryName’ does not exist on type ‘NativeGeocoderReverseResult[]’.