Post Structure

The post structure will remain mostly common for all frameworks

1. Create a simple Ionic 5 app with required framework. Create Basic UI to test the feature

2. Install and import required plugins

3. Implement Google Map

4. Implement GPS permissions

5. Implement auto turn-on GPS

6. Implement geolocation and display user position on Google Map

7. Build on device and test (Android / iOS)

PART 1 — Ionic 5 in React and Capacitor

Build Environment

Node 12.14.1 (any 12.x version should work)
Ionic 5 (CLI 5.3.0)
Capacitor 2.0
React 16.13.x

STEP 1.1 — Create a simple Ionic React app with Capacitor

Make sure you have the latest Ionic CLI. This will ensure you are using everything latest. Ensure latest Ionic CLI installation using

$ npm install -g ionic@latest

Creating a basic Ionic-React app (check all options). Start a basic blank starter using

$ ionic start IonicGeo blank --type=react --capacitor

• --capacitor tells the CLI to create a Capacitor integration, not Cordova!!
• --type=react tells the CLI to create an Ionic React app
• blank template gives a blank home page

Run the app in browser using (yes you guessed it right)

$ ionic serve

You’ll see an empty page open up. That’s fine, your app is running correctly

STEP 1.2 — Add Google Map and other required plugins

We need to add following plugins/packages 

• Google Maps package
• Location Permission plugin
• GPS auto-turn on plugin
• Geolocation plugin

1. Add Google Map package

$ npm install --save google-map-react

$ npm i --save @types/google-map-react

2. Geolocation Permission plugin

This plugin is only required for Android

// Install Core library (once per project)
$ npm install @ionic-native/core

$ npm install cordova-plugin-android-permissions

$ npm install @ionic-native/android-permissions

3. Auto turn-on GPS plugin

This Cordova/Phonegap plugin for Android and iOS to request enabling/changing of Location Services by triggering a native dialog from within the app, avoiding the need for the user to leave your app to change location settings manually.

$ npm install cordova-plugin-request-location-accuracy

$ npm install @ionic-native/location-accuracy

4. Geolocation plugin

Capacitor has in-built Geolocation plugin, so you don’t have to include another plugin in it. It can be directly accessed by importing in any file like this

import { Plugins} from "@capacitor/core";

const { Geolocation} = Plugins;

Alrighty, we’re all set with plugins. Now we import the plugins in our homepage, and add functionalities. 

STEP 1.3 — Implement Google Map

So I have arranged my files in a standard fashion

• HomeView.tsx — contains the view
• HomeContainer.tsx — contains the logic of the view
• Location.tsx — contains the common functions of geolocation, permission etc.
• styles.css — styles for the page

The App.tsx points to HomeContainer.tsx on first load, and it has HomeView.tsx as a child view. 

My HomeView.tsx contains following code for Google Map 

where center is an object with coordinates

center: {
lat: 12.934485599999999
lng: 77.6192336
}

Note: Enter your own Google maps API key in the component to view map correctly. 

With proper styling (width:100%, height: 100%), you should see the Google Map like following

Notice that the marker is in the center of the map. This way you can just supply one coordinate for both center and marker location.

STEP 1.4 —  Implement GPS permissions

This plugin serves to check whether the app has the permission to access location, if not, it requests permission from the user for the same. 

I keep these functions in Location.tsx so I can use it in any of the pages

You can call these functions in yourHomeContainer.tsx right after it loads, or when the user actually requests the location. This really depends on the UX of your app. 

If checkGPSPermission returns true , or requestGPSPermission returns GOT_PERMISSION , you can proceed to check if the device GPS is ON or OFF (only for Android )

STEP 1.5— Implement auto turn-on GPS

In your Location.tsx , add the function for checking and then turning on GPS

If the functions resolves to true , you can proceed to get Geolocation in the app, using the next step

STEP 1.6— Implement geolocation and display user position on Google Map

You can request geolocation in either HomeContainer.tsx orLocation.tsx, depending on whether you are updating your state variables directly or not.

Important: The Geolocation plugin in Capacitor will give you two methods

• getCurrentPosition
• watchPosition

Intuitively, everyone tries to use the getCurrentPosition method. But interestingly this method returns you the last known device location requested in your device’s Google Maps app. While Capacitor developers say this is the way it is supposed to be, it feels counter-intuitive.

Solution : You can use watchPosition method to get your current location (continuously). But to reduce battery usage, as soon as you get the first location data, you can call clearWatch method to stop watching location. You can even keep watching the location for few seconds just to make sure you have consistent reading ! 

Now, combining all the above functionalities, we get following code in our four files

HomeView.tsx 

HomeContainer.tsx 

Location.tsx 

styles.css 

Lets build the app on a device and test it out real quick.

STEP 1.7 — Build on device and test (Android / iOS)

Before building the app on device, compile the web assets using

$ ionic build

Add android platform using

$ npx cap add android

Once Android is added, open Android Studio using

$ npx cap open android

Build the app from Android Studio to your Android device. Here’s how the functionality works for my device (OnePlus 6T, Android X)

1. When app doesn’t have permission AND GPS is OFF

2. When app has permission AND GPS is OFF

3. When app doesn’t have permission AND GPS is ON

That’s it, you just implemented geolocation in your Ionic React Capacitor app, including asking for permission and automatically turning on GPS.