How to use Geolocation in Ionic 4/Angular Apps with Ionic Native

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

Lets get started!

The tutorial assumes you have already installed Node.js and NPM and also the Ionic framework.

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 browsers 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/macOS or your command prompt under Windows and generate a new Ionic 4 based on Angular project:

ionic start ionic4-native-geolocation blank --type=angular

Next navigate to your project folder

cd ionic4-native-geolocation

If you have not yet installed Cordova, you need to install it using the following command:

npm install -g cordova

Then add the target platform to your project

ionic platform add android

We can also add iOS but since we are developing on Ubuntu we can't target iOS. If you are using a MAC, you can add 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 from the ionic-native module so go ahead and open the home.ts file or wherever you want to your code for accessing Geolocation features and add this line of code:

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';

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() method.

After serving this app using:

ionic serve

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


In this tutorial, we've seen how to use Geolocation with Ionic 4 and Angular.

Note: We also publish our tutorials on Medium and If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub

Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.

comments powered by Disqus Protection Status