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