Ionic Geolocation

Today, location plays a vital role in mobile applications. The geolocation plugin gives information about the device locations, such as latitude and longitude. Some of the common sources to find the location information are GPS (Global Positioning System) and location inferred from network signals, such as IP address, Wi-Fi and Bluetooth MAC addresses, RFID, and GSM/CDMA cell IDs.

The most popular mobile application, such as WhatsApp, Facebook, and Instagram, uses geolocation to share your location instead of explaining the direction. Ola and Uber's app provides riding services based on geolocation.

The geolocation plugin is based on the W3C Geolocation API Specification, which only executes on devices that do not provide an implementation. In this tutorial, we are going step by step to get the current location by using the geolocation plugin.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Next, navigate to the project and install the following geolocation plugin using the below command.

$ cd myApp
$ ionic cordova plugin add cordova-plugin-geolocation
$ npm install @ionic-native/geolocation

Step 3: Import the geolocation plugin in the app.module.ts file and also include the plugin in the providers as below. It is a mandatory step. If you skip this step, you will find an error like no provider for geolocation. You can understand it from the following code snippet.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { WebView } from '@ionic-native/ionic-webview/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Geolocation,
    WebView,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 4: Open the home.page.ts file and import the geolocation plugin, then create an object reference for the geolocation class by using the constructor. Now, create a function to get the current location. The following code snippet gives you a detailed explanation.

import { Component } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { LoadingController } from '@ionic/angular';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  lati: any = '';
  longi: any = '';
  constructor(private geolocation: Geolocation, public loadingController: LoadingController, public alertController: AlertController) {

  }
  async getCurrentLocation() {
    const loading = await this.loadingController.create({
      message: 'Please wait...',
      });
    await loading.present();

    this.geolocation.getCurrentPosition({maximumAge: 1000, timeout: 5000, enableHighAccuracy: true }).then((resp) => {
      // resp.coords.latitude
      // resp.coords.longitude
      loading.dismiss();
      this.lati = resp.coords.latitude;
      this.longi = resp.coords.longitude;
      }, er => {
        // alert("error getting location")
        loading.dismiss();
        this.showLoader('Can not retrieve Location');
      }).catch((error) => {
      // alert('Error getting location'+JSON.stringify(error));
      loading.dismiss();
      this.showLoader('Error getting location - ' + JSON.stringify(error));
      });
  }

 async showLoader(msg) {
    const alert = await this.alertController.create({
      message: msg,
      buttons: ['OK']
    });

    await alert.present();
  }
}

Step 5: After creating a function, open the home.page.html file. In this file, you need to create a button and click event to use the function defined in the home.page.ts file.

<ion-header>
  <ion-toolbar>
    <ion-title>Ionic Geolocation</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-button (click)="getCurrentLocation()" expand="block">Get Location</ion-button>
  <ion-list>
    <ion-list-header>
      <ion-label>Location Information</ion-label>
    </ion-list-header>
    <ion-item>
      <ion-label>Latitue</ion-label>
      <ion-badge slot="end">{{lati}}</ion-badge>
    </ion-item>
    <ion-item>
      <ion-label>longitude</ion-label>
      <ion-badge slot="end">{{longi}}</ion-badge>
    </ion-item>
  </ion-list>
</ion-content>

Step 6: Now, you need to add the target platform to deploy the app. You can use your phone to run and test the app. For this, you need to install the following command.

$ ionic cordova platform add android
$ ionic cordova run android --aot

If you want to test your app in the browser, run the below command.

Step 7: When you execute the app, you will get the output as below image.

Now, click on the Get Location button, you will get the current location of your device in the form of latitude and longitude. It can be shown in the below screen.