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.

ionic plugin add cordova-plugin-geolocation
ionic plugin add cordova-plugin-nativegeocoder

1 2	ionic plugin add cordova-plugin-geolocation ionic plugin add cordova-plugin-nativegeocoder

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

npm install @ionic-native/geolocation --save
npm install @ionic-native/native-geocoder --save

1 2	npm install @ionic-native/geolocation --save npm install @ionic-native/native-geocoder --save

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

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder } from '@ionic-native/native-geocoder';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    NativeGeocoder,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { Geolocation } from '@ionic-native/geolocation';

import { NativeGeocoder } from '@ionic-native/native-geocoder';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Geolocation,

NativeGeocoder,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

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.

<button ion-button (click)="geolocate()">Get Location</button>

1	<button ion-button (click)="geolocate()">Get Location</button>

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

import { Component } from '@angular/core';

import { NavController, ToastController } from 'ionic-angular';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-native/native-geocoder';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public geolocation: Geolocation, public geocoder: NativeGeocoder, public toaster: ToastController, public locac: LocationAccuracy) {    
  }

  geolocate() {
    let options = {
      enableHighAccuracy: true
    };
    
      this.geolocation.getCurrentPosition(options).then((position: Geoposition) => {
      this.getcountry(position);
    }).catch((err) => {
      alert(err);
    })
    
  }

  getcountry(pos) {
    this.geocoder.reverseGeocode(pos.coords.latitude, pos.coords.longitude).then((res: NativeGeocoderReverseResult) => {
      let country = this.toaster.create({
        message: res.countryName,
        duration: 4000
      });
      country.present();
    })
  }

}

import { Component } from '@angular/core';

import { NavController, ToastController } from 'ionic-angular';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';

import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-native/native-geocoder';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController, public geolocation: Geolocation, public geocoder: NativeGeocoder, public toaster: ToastController, public locac: LocationAccuracy) {

}

geolocate() {

let options = {

enableHighAccuracy: true

};

this.geolocation.getCurrentPosition(options).then((position: Geoposition) => {

this.getcountry(position);

}).catch((err) => {

alert(err);

})

}

getcountry(pos) {

this.geocoder.reverseGeocode(pos.coords.latitude, pos.coords.longitude).then((res: NativeGeocoderReverseResult) => {

let country = this.toaster.create({

message: res.countryName,

duration: 4000

});

country.present();

})

}

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.

ionic plugin add cordova-plugin-request-location-accuracy

1	ionic plugin add cordova-plugin-request-location-accuracy

Install the native wrapper as well using the below command.

npm install @ionic-native/location-accuracy --save

1	npm install @ionic-native/location-accuracy --save

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

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Geolocation } from '@ionic-native/geolocation';
import { NativeGeocoder } from '@ionic-native/native-geocoder';
import { LocationAccuracy } from '@ionic-native/location-accuracy';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    NativeGeocoder,
    LocationAccuracy,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { NgModule, ErrorHandler } from '@angular/core';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

import { Geolocation } from '@ionic-native/geolocation';

import { NativeGeocoder } from '@ionic-native/native-geocoder';

import { LocationAccuracy } from '@ionic-native/location-accuracy';

@NgModule({

declarations: [

MyApp,

HomePage

imports: [

IonicModule.forRoot(MyApp)

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage

providers: [

StatusBar,

SplashScreen,

Geolocation,

NativeGeocoder,

LocationAccuracy,

{provide: ErrorHandler, useClass: IonicErrorHandler}

]

})

export class AppModule {}

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

import { Component } from '@angular/core';

import { NavController, ToastController } from 'ionic-angular';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';
import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-native/native-geocoder';
import { LocationAccuracy } from '@ionic-native/location-accuracy';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public geolocation: Geolocation, public geocoder: NativeGeocoder, public toaster: ToastController, public locac: LocationAccuracy) {    
  }

  geolocate() {
    let options = {
      enableHighAccuracy: true
    };
    this.locac.canRequest().then((res: boolean) => {
      if (res) {
        this.locac.request(this.locac.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {
          this.geolocation.getCurrentPosition(options).then((position: Geoposition) => {
      this.getcountry(position);
    }).catch((err) => {
      alert(err);
    })
        }, (error) => {
          alert(error);
        })
      }
    })
    
  }

  getcountry(pos) {
    this.geocoder.reverseGeocode(pos.coords.latitude, pos.coords.longitude).then((res: NativeGeocoderReverseResult) => {
      let country = this.toaster.create({
        message: res.countryName,
        duration: 4000
      });
      country.present();
    })
  }

}

import { Component } from '@angular/core';

import { NavController, ToastController } from 'ionic-angular';

import { Geolocation, Geoposition } from '@ionic-native/geolocation';

import { NativeGeocoder, NativeGeocoderReverseResult } from '@ionic-native/native-geocoder';

import { LocationAccuracy } from '@ionic-native/location-accuracy';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController, public geolocation: Geolocation, public geocoder: NativeGeocoder, public toaster: ToastController, public locac: LocationAccuracy) {

}

geolocate() {

let options = {

enableHighAccuracy: true

};

this.locac.canRequest().then((res: boolean) => {

if (res) {

this.locac.request(this.locac.REQUEST_PRIORITY_HIGH_ACCURACY).then(() => {

this.geolocation.getCurrentPosition(options).then((position: Geoposition) => {

this.getcountry(position);

}).catch((err) => {

alert(err);

})

}, (error) => {

alert(error);

})

}

})

}

getcountry(pos) {

this.geocoder.reverseGeocode(pos.coords.latitude, pos.coords.longitude).then((res: NativeGeocoderReverseResult) => {

let country = this.toaster.create({

message: res.countryName,

duration: 4000

});

country.present();

})

}

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

Follow me

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…

https://www.google.com.au/maps/place/15+Beach+Rd,+Collaroy+NSW+2097

and google maps api…

https://maps.googleapis.com/maps/api/geocode/json?address=15%20Beach%20Rd,%20Collaroy,%20NSW,%20Australia

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

Hi,
Cli commande have changed :
ionic cordova plugin add cordova-plugin-geolocation
and
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…??
StaticInjectorError[ApplicationInitStatus]:
StaticInjectorError[ApplicationInitStatus]:
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[]’.

T-Pub :)

The Techies' pub

Ionic 2 – Geolocation and Geocoding

Read previous post:

Ionic 2 – Serving images with Firebase-Storage