@ionic-native/Google Maps plugin demo project (need help!)

Hi ionic developers,

Could you help to create a demo application for the @ionic-native/google-maps wrapper plugin?
I appreciate if many ionic developers jump on this project.

If 50 people creates 50 pages, the project would be done soon!!

I am Masashi Katsumata, who is the author of cordova-plugin-googlemaps.

This plugin is also known for @ionic-native/google-maps.

Actually the @ionic-native/google-maps wrapper plugin is developed by someone, not by me.

Because of this, the wrapper plugin has many bugs so far.
I have fixed a lot of incorrect code, and sent pull requests, but it is hard to figured out small mistakes everything on just reviewing.

That’s why I decided to create a demo app for the @ionic-native/google-maps wrapper plugin.


The goal of this demo project is to create all methods of the @ionic-native/google-maps wrapper plugin.

Some contributors and I have been working on this project since last month, but everyone is busy.
The working progress is kind of slow. But I would like to speed up the working progress.
So I really appreciate if you jump on this project.

How to contribute?

The process is very easy.
I created a demo app of JS version. Basically you just need to convert to ionic version.

For example, the demo of map.setMapTypeId()

JS version

var div = document.getElementById("map_canvas");
var map = plugin.google.maps.Map.getMap(div, {
  mapType: plugin.google.maps.MapTypeId.ROADMAP
map.one(plugin.google.maps.event.MAP_READY, function() {
  var select = div.getElementsByTagName('select')[0];
  select.addEventListener('change', function() {


And this is the @ionic-native/google-maps version


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
} from '@ionic-native/google-maps';

  selector: 'page-set-map-type-id',
  templateUrl: 'set-map-type-id.html',
export class SetMapTypeIdPage {
  map: GoogleMap;
  mapTypeId: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private googleMaps: GoogleMaps) {}

  ionViewDidLoad() {
    var self=this;
  loadMap() {
    this.map = this.googleMaps.create('map_canvas', {
      mapType: GoogleMapsMapTypeId.ROADMAP

    // Wait the MAP_READY before using any methods.
      .then(() => {
        console.log('Map is ready!');

  onItemSelected(item) {

Just like this, you just need to copy the JS code, and convert to TypeScript, then commit it.

How to jump on this project?

Please join the slack channel from here.

More detailed steps are described in the README.md of the repository.


If you face any problems, please file an issue at the issue list page
I will answer as much as possible.

Or small question, just chat to me at the slack channel please.


I’m planing to pay some amount to people who contribute the project based on how contribute to the project.
(But don’t expect much amount, I’m not rich man)

1 Like

That’s a great idea.

Does the JS version https://github.com/mapsplugin/v2.0-demo cover all functionality of the plugin?

Yes, it is.

The demo project is really helpful to confirm the behaviors of the plugin for everyone.
That’s why I have been trying to create the ionic version.

Nice. Is the JS demo available in the stores or only via the downloadable APK?

You can download the demo apk from the repository top page.
34 AM


Ok, so not at the stores. Thanks.

I decided I don’t support the @ionic-native/google-maps plugin for a while.