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.
https://ionicframework.com/docs/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()
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() {
map.setMapTypeId(plugin.google.maps.MapTypeId[this.value]);
});
});
And this is the @ionic-native/google-maps version
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
GoogleMapsMapTypeId
} from '@ionic-native/google-maps';
@IonicPage()
@Component({
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;
self.loadMap();
}
loadMap() {
this.map = this.googleMaps.create('map_canvas', {
mapType: GoogleMapsMapTypeId.ROADMAP
});
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
console.log('Map is ready!');
});
}
onItemSelected(item) {
this.map.setMapTypeId(GoogleMapsMapTypeId[this.mapTypeId]);
}
}
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.
https://join.slack.com/t/ionic-googlemaps/shared_invite/MjQxODYzMDg3NTQzLTE1MDUzMzY4NjItYzAzYmY2NGViMg
More detailed steps are described in the README.md of the repository.
Issues
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.
Rewards
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)
