Ionic 4 | Cordova Google Maps Integration

Written by on July 2, 2019

Ionic 4 | Cordova Google Maps Integration

The following is a custom example and tutorial on how to integrate Cordova Goole Maps plugin with Ionic 4.

We will not cover a vanilla JavaScript solution, instead, we will do it from the perspective of ionic-native/geolocation plugin.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Preparations

As in all my other tutorials on this topic, you need to have a working Ionic 4 workspace.

You will need these to finish your tutorial:

  • Android or iOS environment (optional as we can also run it in our browser)
  • NodeJS
  • Ionic
  • Cordova

If you neet to set-up a working Ionic 4 environment just follow this tutorial: Ionic [4] | Installation Guide.

1. Update Ionic CLI

Install or update your current Ionic version:

npm install -g ionic cordova

To update:

npm update -g ionic cordova

2. Create A New Project

ionic start IonicGoogleMapsExampleV2 blank
cd IonicGoogleMapsExampleV2

The working example of this article is at the end of this article, just follow provided README.md instructions. Just click here if you want to jump there.

Warning: As some of you don't have a prior Ionic CLI experience, from this point and on, every time I tell you to execute something, do that inside an example project folder.

3. Add Required Platform

If you want to use the browser:

ionic cordova platform add browser

Android platform:

ionic cordova platform add android

iOS platform:

ionic cordova platform add ios

3. Install Ionic Native Geolocation Plugin

Ionic Native is just an Ionic-based layer around different Cordova Plugins. In a nutshell, you do not need to mix TypeScript with vanilla JavaScript code.

ionic cordova plugin add cordova-plugin-googlemaps
npm install --save @ionic-native/core@latest @ionic-native/google-maps@latest

To be able to use this article you will also need to acquire Google Maps API keys. You can follow the tutorial found here.

Walkthrough

This example is made simple with the use of Ionic Native Geolocation plugin. This process used to be a pain in the neck, where you had to link a correct external Google Maps SDK library. This is no longer the case as the process is now streamlined.

First, we need to create a container for our map. As we only have one home page we will do it inside:

<ion-content>
    <div id="map_canvas"></div>
</ion-content>

This is everything we need to do with our HTML. Next, open home.page.ts file and include Ionic Native Google Maps components:

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapOptions,
  CameraPosition,
  MarkerOptions,
  Marker,
  Environment
} from '@ionic-native/google-maps/ngx';

If you have previously worked with any other JavaScript-based Google Maps implementation you would know that we can only initialize map component after a platform ready state. This we need to use this specific syntax:

async ngOnInit() {
    await this.platform.ready();
    await this.loadMap();
} 

As you can see, we are waiting for the page to initialize and reach a platform ready state. Only then we can start loading map component.

OnInit is an Angular lifecycle method that tells our component to call our method at the appropriate time. When an async function is called, it returns a Promise. This Promise is resolved when the function returns the value. We can use await expression to pause the execution of the async function. This also pauses the resolution of passed Promise.

One last thing, do not forget to implement the OnInit interface:

export class HomePage implements OnInit {

The loadMap function will initialize our map.

What comes next is pretty much straightforward and do not require much explanation.

// This code is necessary for browser
Environment.setEnv({
  'API_KEY_FOR_BROWSER_RELEASE': '<ADD YOUR API KEY>',
  'API_KEY_FOR_BROWSER_DEBUG': '<ADD YOUR API KEY>'
});

let mapOptions: GoogleMapOptions = {
  camera: {
	 target: {
	   lat: 43.0741904,
	   lng: -89.3809802
	 },
	 zoom: 18,
	 tilt: 30
   }
};

this.map = GoogleMaps.create('map_canvas', mapOptions);

You will need to provide Google Maps API key:

Environment.setEnv({
  'API_KEY_FOR_BROWSER_RELEASE': '<ADD YOUR API KEY>',
  'API_KEY_FOR_BROWSER_DEBUG': '<ADD YOUR API KEY>'
});

It’s also important to notice, you will not be able to trigger Environment object if you have imported old Native Ionic Google Maps implementation. So this will not work even if it is described like that in the official documentation:

'@ionic-native/google-maps';

However, this will work:

'@ionic-native/google-maps/ngx';

We need to provide Google Maps options and create a map:

let mapOptions: GoogleMapOptions = {
  camera: {
	 target: {
	   lat: 43.0741904,
	   lng: -89.3809802
	 },
	 zoom: 18,
	 tilt: 30
   }
};

this.map = GoogleMaps.create('map_canvas', mapOptions);

Finally, when you execute this code you will get … drums rolling … big nothing. Why? Because we need to give dimensions to div holding our map container:

#map_canvas {
	width: 100%;
	height: 100%;
}

This is it, simple and straightforward.

Continue to the next page

Categories

10 thoughts on “Ionic 4 | Cordova Google Maps Integration”

  1. Hi,
    Is it possible to use this Plugin to check if the GPS Module is enabled on the device. Or is there any other plugin which i could use to check this.
    Thanks
    Suresh

    • Hi, thanks for reply, that error was running the command “ionic run android -l” I quit the “-l” and works!! but even there, the app told me “not sufficient permission” then I re-add the platform and reboot the device, then works

Leave a Reply