How to use Geolocation in Ionic 2 apps with Ionic Native -- Words (440)

Ionic
Using Geolocation in Ionic 2 apps with Ionic Native

In this tutorial ,we are going to build a simple example app with Ionic 2 which shows you how to use the geolocation native feature of mobile devices .

So lets get started .The tutorial assumes you have already installed Node.js and NPM and also the Ionic framework . Also if you want to build the app for Android or iOS you have to install the required SDKs .

Unlike the majority of device native features ,Geolocation can be tested without using a real mobile device . By just testing your app with ionic serve on the browser you can work with Geolocation ,that's because modern browser implement the HTML5 Geolocation API so Ionic can emulate the native Geolocation of a real mobile device .

If you have everything installed ,open up your terminal under Linux/MAC or your command prompt under Windows and generate a new Ionic 2 based project :

ionic start ionic2-native-geolocation blank --v2

Next navigate to your project folder

cd ionic2-native-geolocation

If you have not yet installed Cordova ,you need to install it with

npm install -g cordova

Then add the target platform to your project

ionic platform add android

We can also add iOS but since i'm developing on Ubuntu i can't target iOS .If youare using MAC Then you can the iOS platform too

ionic platform add ios 

Next you need to add the Geolocation plugin with

ionic plugin add cordova-plugin-geolocation

Now to use the Geolocation API you have to import it fro ionic-native module so go ahead and open home.ts or wherever you want to your code for accessing Geolocation features and copy this line

import { Geolocation } from 'ionic-native';

Here is an example of MyApp component

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Geolocation } from 'ionic-native';
import { HomePage } from '../pages/home/home';

@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {

rootPage: any = HomePage;

constructor(platform: Platform) {

    platform.ready().then(() => {

        Geolocation.getCurrentPosition().then((data) => {
            console.log('My latitude : ', data.coords.latitude);
            console.log('My longitude: ', data.coords.longitude);
        });

    });
}
}   

Make sure you add any code for accessing native features such as Geolocation inside platform.ready()

After serving this app using

ionic serve

You'll get your current latitude and longitude coordinates on the browser console .



mrnerd is a Web Entrepreneur & Developer, Digital Marketer and a Passionate Blogger. He writes about software and website development,money making tips and SEO etc.. He is a tech addict and a computer geek with a lot of hobbies.