DEV Community

Digamber Singh
Digamber Singh

Posted on • Originally published at positronx.io on

Ionic 4 Cordova Geolocation and Geocoder Tutorial with Examples

This is a step by step tutorial on how to use Cordova Geolocation and Geocoder plugin in an Ionic 4 app to get the current user device position, get current user address.

In this tutorial we are going to learn how to get users device location with latitude and longitude.

We will learn to get the users address using Geolocation and Geocoder Plugins.

We will look at how to add target platforms such as iOS, Android or Windows and create the build in Ionic for various devices.

Table of Contents

  1. Prerequisite
  2. Create New Ionic 4 / Angular Project
  3. Install & Configure Cordova Geolocation and Geocoder Plugins
  4. Get Current Location Latitude and Longitude
  5. Get Current Address
  6. Add Target Platform: Android, iOS or Windows
  7. Build Your Ionic App
  8. Conclusion

Prerequisite

We must have the latest version of Node js installed on our device. If you are not having then follow this tutorial on: How to Download and Install Node.js and npm

Create New Ionic 4 / Angular Project

Use the command to install Ionic 4 Cordova globally on your machine.

sudo npm install -g cordova ionic
Enter fullscreen mode Exit fullscreen mode

By using the following command, you can check the Ionic CLI version running on your machine.

ionic -v

# 5.4.13
Enter fullscreen mode Exit fullscreen mode

Use below command to update Ionic and Cordova.

sudo npm update -g cordova ionic
Enter fullscreen mode Exit fullscreen mode

Let’s start installing a brand new Ionic 4 Angular app with the help of Ionic CLI, run the following command in your terminal.

ionic start ionic-geolocation-app blank --type=angular
Enter fullscreen mode Exit fullscreen mode

Get inside the project folder.

cd ionic-geolocation-app
Enter fullscreen mode Exit fullscreen mode

Start the app in the browser.

ionic serve --lab
Enter fullscreen mode Exit fullscreen mode

click here to read more

Oldest comments (0)