Google Map

Run Google Map using Cordova Ionic 5

Posted by
Send Push notification
We guide step by step tutorial on sending In-App Messaging on Mobile App using Ionic 5 and Firebase Cloud Messaging (FCM)

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.

Ionic Installation
Install the ionic framework and check the version

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…

Enable Google Map
Enable Google Map
Enable Google Map
Enable Google Map
Enable Google Map
Enable Google Map
Enable Google Map
Enable Google Map

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
Start the Google Map ionic 5 Project
Start the Google Map ionic 5 Project

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
Install ionic google-map plugin via command line

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.

Google Map API's key
Google Map API’s key

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
Hey , Google Map loading successfully
Done…

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

Thanks,

Yogesh Patil

16 comments

  1. Congratulations on being deemed operational by PA. I am an investor of UNVC. I am so excited about the future partnership between UNVC and Agrimed Industries. I am really hoping that we see a reverse merger between Agrimed and UNVC. Going public through a reverse merger with UNVC would give Agrimed access to the capital markets and be an inexpensive way to go public. Good luck with your business ventures. Amalia Walt Wilfreda

  2. My wife Annie and I have met and spoken with Beto and we share his concern for the direction things are headed, Nelson explained. It was a rather delightful afternoon learning more about a Chicago musical legend that deserves to have his great legacy continue to transcend and expand. The tour started in Atlanta and ended in disaster. Ready to Die OG Edition 2. Por suerte Belgrano, desobediente, finalmente hace frente y derrota a los realistas que debern retirarse con grandes perdidas de hombres y equipos militares, derrotados con los valientes gauchos que los ilustrados porteos rebautizaran con el mas decente denominativo de valientes campesinos a caballo. Hermione Mata Michelsen

  3. Wielkie biografie powstaja z ruchu do przodu i progresywnego pressingu, a nie z ogladania sie do tylu. P. Coelho… & TM Created by ENdemol Studio…

  4. Wszyscy umrzemy. Celem nie jest zyc wiecznie, celem jest stworzyc cos, co bedzie zylo. – Chuck Palahniuk

  5. Thanks for any other excellent article. Where else may anybody get that type of info in such a perfect way of writing? I have a presentation next week, and I am at the search for such info. Gusti Clem Goldi

  6. Awesome write-up. I am a normal visitor of your blog and appreciate you taking the time to maintain the excellent site. I will be a regular visitor for a really long time. Amitie Franky Kathy

  7. Credibly reintermediate backend ideas for cross-platform models. Continually reintermediate integrated processes through technically sound intellectual capital. Holistically foster superior methodologies without market-driven best practices. Elita Bo Felix

Leave a Reply

Your email address will not be published. Required fields are marked *