Explains all the steps required to implement Google Maps in Ionic 4 for Android by developing a simple application.

Implement Google Maps In Ionic 4 For Android
Implement Google Maps In Ionic 4 For Android
March 10, 2019

This post explains all the steps required to implement Google Maps in Ionic 4 for Android applications. The steps should be the same for other versions of Ionic.

It assumes that the user is familiar with the Google Developer Console and knows the basics of Ionic and Angular. You can follow our Hello Ionic and Deploy Ionic App On Android tutorials to learn the basics of Ionic.

Create Credentials

We need to create the credential specific for native Android applications in order to implement the Google Maps service. Login to Google Cloud Platform and click on the Navigation Menu(Top left Menu Icon), hover on APIs & Services and click on Credentials Link as shown in Fig 1.

All Credentials

Fig 1

The above action shows All Credentials Page having a list of active credentials. Click on the Create Credentials Button and then click on API key as shown in Fig 2.

Create Credentials

Fig 2

It will show the newly created API key as shown in Fig 3. Copy the API key to configure the application for maps.

API Key

Fig 3

Click on the RESTRICT KEY Link to imposes restrictions on the key to avoid unauthorized actions. Provide an appropriate name to the key and restrict it to Android native as shown in Fig 4.

Restrict Key

Fig 4

Restrict the key to access Android Maps services as shown in Fig 5.

API Restriction

Fig 5

Again click on Navigation Menu -> APIs & Services -> Library to view all the available services. Search for Maps as shown in Fig 6.

Maps Services

Fig 6

Click on Maps SDK for Android and then click on the Enable Button to enable the maps service for Android native applications.

Create Maps Application

Create the Maps application following the steps mentioned in the Hello Ionic tutorial.

// Create the Maps application
ionic start maps blank

// Go to app directory
cd maps

// Configure Cordova by providing the API key
ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="<Google Maps key for Android>"

// Install Google Maps NPM package
npm install @ionic-native/core@beta @ionic-native/google-maps@beta

The above-mentioned commands create the application having the name set to maps and configure Cordova google maps plugin to use the API key created by us. We have also installed the google maps component from Ionic.

Update Home

Open the file maps/src/app/home/home.page.html and update the content as shown below.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Hello Maps
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div id="map" style="height:100%;"></div>
</ion-content>

The above lines add the title using the header tag and cover the entire content area to show the map.

Configure App

In this step, we will configure the app to use Google Maps from Ionic by using appropriate imports.

Open the file maps/src/app/home/home.page.ts and update the content as shown below.

import { Component, ViewChild } from '@angular/core';

// Import classes from maps module import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng, MarkerOptions, Marker } from "@ionic-native/google-maps"; import { Platform, NavController } from "@ionic/angular"; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage {

constructor( public platform: Platform, public nav: NavController ) {

} }

Open the file maps/src/app/app.module.ts and update the content as shown below.

....
....
import { GoogleMaps } from '@ionic-native/google-maps';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
GoogleMaps
], .... ....

Update HomePage Class

Now we will update the HomePage Class to process the map as shown below.

....
....
export class HomePage {

constructor( public platform: Platform, public nav: NavController ) {

}

ngAfterViewInit() {

this.platform.ready().then( () => {

this.loadMap();
});
}

}

Now add the method loadMap as shown below to load the map using the map element added by us in the home.page.html view file.

loadMap() {

let map = GoogleMaps.create( 'map' );

map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {

let coordinates: LatLng = new LatLng( 36.7783, 119.4179 );

let position = {
target: coordinates,
zoom: 14
};

map.animateCamera( position );

let markerOptions: MarkerOptions = {
position: coordinates,
icon: "assets/images/marker.png",
title: 'Hello California'
};

const marker = map.addMarker( markerOptions )
.then( ( marker: Marker ) => {
marker.showInfoWindow();
});
})
}

Build the Application

Build the application using build command as shown below. It will take some time to build the application for the first time.

ionic cordova build android

Run the Application

Once the build completes successfully, run the application as shown below.

ionic cordova run android

It will execute the application and show the map having the coordinates provided by us as shown in Fig 7.

App Output

Fig 7

Key Notes: These notes might be handy in case the default emulator without custom hardware profile does not work out of the box.

* Use the Google Play Services system images as mentioned in Deploy Ionic App On Android tutorial.

* Try to increase the Heap size.

* Use pre-configured hardware profile Nexus 5 or Nexus 5s configured with Play Store.

* Connect your device with the system and run the application instead of using AVD.

The complete source code is available on GitHub.

Write a Comment

Click on the captcha image to get new code.
Discussion Forum by DISQUS