Run Google Map using Cordova Ionic 5

Indexing of development :

• Setup and install the ionic framework
• Enable Google Map API for android and iOS platform
• Create an ionic 5 application and platform setup
• Install ionic native google map plugins
• Run and test the project

Required tools :

• Node JS
• Angular 8
• Ionic 5
• Cordova
• Enable Google Map API
• Ionic 5 Cordova Native FCM
• Terminal or Command Line
• Any suitable IDE or Text Editor (As we using a Visual Studio Code)

Let’s start the development

Before going move-forward and according to the principal steps, we believe that you have already to install NodeJS. If not, kindly download it using the link: NodeJS

Step 1: Setup and install the ionic framework

$ sudo npm install -g ionic
$ sudo ionic -v

You need to install the ionic framework, to full-fill the requirement to create an ionic project.

Step 2: Enable Google Map API’s

Create a Google Map Project …click here….

Enable Google Map API’s

Enable google analytics and other usual thing…

Step 3 : Create an ionic 5 application and platform setup

Now it times to set up the new ionic 5 application, please use the below command and run it to your terminal or command prompt.

$ ionic start google_map_oonic_5 blank --type=angular

  ? Integrate your new app with Capacitor to target native iOS and Android? No

If see the above question … Choose No. It will integrate Cordova instead of Capacitor as Native functionality. Now change the root folder via below command

cd ./google_map_ionic_5

Step 4: Install google map plugin via command line

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps
$ npm install @ionic-native/[email protected] @ionic-native/[email protected] --save

Now it’s time to add the Google Map API’s key into config.xml file. It differs for every project to make sure you add only your google map API keys.

Replace your code with below in your home.html

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Google Map</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content padding>

    <h3>Ionic GoogleMaps Demo</h3>
    <p>
      Google Map
    </p>
    <ion-button ion-button (click)="onButtonClick()">Demo</ion-button>
    <div style="height: 100%; width: 100%;" id="map_canvas">

    </div>
  </ion-content>

Replace your home.page.ts code via below.

import { Component, OnInit } from '@angular/core';
import {
  ToastController,
  Platform,
  LoadingController
} from '@ionic/angular';
import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation
} from '@ionic-native/google-maps';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {

  map: GoogleMap;
  loading: any;

  constructor(
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    private platform: Platform) { }

  async ngOnInit() {
    // Since ngOnInit() is executed before `deviceready` event,
    // you have to wait the event.
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    this.map = GoogleMaps.create('map_canvas', {
      camera: {
        target: {
          lat: 43.0741704,
          lng: -89.3809802
        },
        zoom: 18,
        tilt: 30
      }
    });

  }

  async onButtonClick() {
    this.map.clear();

    this.loading = await this.loadingCtrl.create({
      message: 'Please wait...'
    });
    await this.loading.present();

    // Get the location of you
    this.map.getMyLocation().then((location: MyLocation) => {
      this.loading.dismiss();
      console.log(JSON.stringify(location, null ,2));

      // Move the map camera to the location with animation
      this.map.animateCamera({
        target: location.latLng,
        zoom: 17,
        tilt: 30
      });

      // add a marker
      let marker: Marker = this.map.addMarkerSync({
        title: 'Hey User , Welcome',
        snippet: 'This is Ionic 5 app with Google Map!',
        position: location.latLng,
        animation: GoogleMapsAnimation.BOUNCE
      });

      // show the infoWindow
      marker.showInfoWindow();

      // If clicked it, display the alert
      marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
        this.showToast('clicked!');
      });
    })
    .catch(err => {
      this.loading.dismiss();
      this.showToast(err.error_message);
    });
  }

  async showToast(message: string) {
    let toast = await this.toastCtrl.create({
      message: message,
      duration: 2000,
      position: 'middle'
    });

    toast.present();
  }
}

Setup 5 : Add the Android and iOS platform run Your App

$ ionic cordova platform add android
$ ionic cordova platform add ios

It may possible that you would possibly get multidex error while run or build the app via Terminal. Please add below line in your ./platform/android/app/build.gradle file

multidexEnabled true

Build or Run your android app via Terminal

$ ionic cordova build android
        or
$ ionic cordova run android

That’s it. You are successfully build the ionic 5 app and integrate the google map.

Thanks,

Yogesh Patil