@Ionic native/google-maps

@ionic-native / google-maps
Cordova GoogleMaps plugin project
Masashi Katsumata

@ionic-native/google-maps
● Embed native Google Maps view in your app
● One code for both Android and iOS
● Easy to use
● Faster than Google Maps Javascript API v3
● Free to use. Apache License v2

・UI components
・View management
・TypeScript -> JS
...etc
Your code run on
this browser view
Bridge between
native system
and your code!

Let’s see the
demo!

<button ion-button>(HTML)
Google Map!
(native view)

The Map
is
touchable
The side menu
is
touchable!!
The Map
is not
touchable!

Google Map is under the browser!!

touch layer
(native)
Is this on map
or browser?
Pass
the touch event to
the map or browser

Google Maps API key
https://console.developers.google.com/projectselector/apis/library
API key

Enable Google Maps APIs
Enable Both APIs
API key

Create credential
Start from here!
API key

Generate an API key
This is the API key
Restrict your key
when you
release your app
API key

Create a project & install plugins
$> ionic start myApp sidemenu
$> npm install @ionic-native/google-maps @ionic-native/core
$> ionic cordova plugin add cordova-plugin-googlemaps
--variable API_KEY_FOR_ANDROID=”.....”
--variable API_KEY_FOR_IOS=”.....”
Please use the
latest version
anytime!
API key Create project

app/src/app.module.ts
Add this line
Add this line
API key Create project
import { BrowserModule } from '@angular/platform-browser';
...
import { GoogleMaps } from "@ionic-native/google-maps";
@NgModule({
....
providers: [
StatusBar,
SplashScreen,
GoogleMaps,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

src/pages/home/home.html
Add a div (map div)
API key Create project HTML & CSS
<ion-content padding>
<h3>Ionic GoogleMaps Starter</h3>
<div id="map_canvas">
<button ion-button (click)="onButtonClick($event)">Start demo</button>
</div>
</ion-content>

src/pages/home/home.scss
page-home {
#map_canvas {
height: 90%;
}
}
Background styles become be transparent
by the maps plugin mandatory!
You can set the background color through
Environment.setBackgroundColor()
API key Create project HTML & CSS

src/app/app.components.ts
API key Create project HTML & CSS Coding
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this.rootPage = HomePage;
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
Set the first page
after the platform.read() is called

If you forget that …
ionViewDidLoad() is executed
(DOM elements are ready)
platform.ready() is executed later
(the native plugins are ready to use)
Then you get this error message

src/pages/home/home.ts
import { GoogleMaps, GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';
export class HomePage {
map: GoogleMap;
constructor( public navCtrl: NavController, private googleMaps: GoogleMaps ) { }
ionViewDidLoad() {
this.loadMap();
}

src/pages/home/home.ts
loadMap() {
// Create a map after the view is ready and the native platform is ready.
this.map = this.googleMaps.create('map_canvas');
// Wait the maps plugin is ready until the MAP_READY event
this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
console.log('map is ready to use.');
});
}

Run it!!
$> ionic cordova run android
API key Create project HTML & CSS Coding Run it!

Marker

Add a marker
this.map.addMarker({
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
}).then((marker: Marker) => {
marker.showInfoWindow();
});

icon property
title: 'Ionic',
icon: 'blue',
animation: 'DROP',
position: {
lat: 43.0741904,
lng: -89.3809802
}
});
color name : blue, red, green, yellow ....
(157 color names are defined in this plugin)
rgb(), rgba() , hsl(), hsla(), #RGB, #RGBA
:
./assets/icon.png (jpg, gif, and png) :
http(s)://yourserver/icon.png :
cdvfile:// …. /icon.png :
data:image/png;base64,iVBORw0KGgo...CC :
:

icon property
let POINTS: BaseArrayClass<any> = new BaseArrayClass<any>([
{
position: {lat:41.79883, lng:140.75675},
iconData: "./assets/imgs/Number-1-icon.png"
},
{
position: {lat:41.799240000000005, lng:140.75875000000002},
iconData: "http://icons.iconarchive.com/.../24/Number-2-icon.png"
},
{
position: {lat:41.797650000000004, lng:140.75905},
iconData: {
url: "http://icons.iconarchive.com/.../48/Number-3-icon.png",
size: { width: 24, height: 24}
}
},
{
position: {lat:41.79637, lng:140.76018000000002},
title: "4",
iconData: "blue"
},
{
position: {lat:41.79567, lng:140.75845},
title: "5",
iconData: "data:image/png;base64,iVBORw...CC"
}
]);

Marker events
● MARKER_CLICK
● MARKER_DRAG_START
● MARKER_DRAG
● MARKER_DRAG_END
● INFO_CLICK
● INFO_LONG_CLICK
● INFO_OPEN
● INFO_CLOSE

Add event listener
Listen the event only one time
Listen the event multiple times
marker.addEventListenerOnce(GoogleMapsEvent.MARKER_CLICK).then();
// Alias method
marker.one(GoogleMapsEvent.MARKER_CLICK).then();
marker.addEventListener(GoogleMapsEvent.MARKER_CLICK).subscribe();
// Alias method
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe();

Remove event listener
Listen the event only one time
// Remove particular event listener
marker.off(GoogleMapsEvent.MARKER_CLICK, this.onMarkerClick);
// Remove all event listeners for the MARKER_CLICK event
marker.off(GoogleMapsEvent.MARKER_CLICK);
// Remove all event listeners of all events
marker.off();

Example
position: {
lat: 43.0741804,
lng: -89.381
},
title: "A",
disableAutoPan: true
}).then(this.onMarkerAdded);
position: {
lat: 43.0741804,
lng: -89.382
},
title: "B",
}).then(this.onMarkerAdded);
onMarkerAdded(marker: Marker) {
marker.one(GoogleMapsEvent.MARKER_CLICK).then(() => {
alert("Marker" + marker.getTitle() + " is clicked");
});
}

Polyline

Polyline
let AIR_PORTS = [
HND_AIR_PORT, HNL_AIR_PORT, SFO_AIR_PORT
];
this.map.addPolyline({
points: AIR_PORTS,
color: '#AA00FF',
width: 10,
geodesic: true,
clickable: true // clickable = false in default
}).then((polyline: Polyline) => {
polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
let position: LatLng = <LatLng>params[0];
position: position,
title: position.toUrlValue(),
});
});
});
Click event with LatLng
(Because this plugin calculates own way)

Polygon

Polygon
Just pass ILatLng[]
let GORYOKAKU_POINTS: ILatLng[] = [
{lat: 41.79883, lng: 140.75675},
{lat: 41.799240000000005, lng: 140.75875000000002},
{lat: 41.797650000000004, lng: 140.75905},
…
{lat: 41.79909000000001, lng: 140.75465}
];
this.map.addPolygon({
'points':GORYOKAKU_POINTS,
'strokeColor' : '#AA00FF',
'fillColor' : '#00FFAA',
'strokeWidth': 10
}.then((polygon: Polygon) => {
...
});

Circle

Circle
let center: ILatLng = {"lat": 32, "lng": -97};
let radius = 300; // radius (meter)
this.map.addCircle({
'center': center,
'radius': radius,
'strokeColor' : '#AA00FF',
'strokeWidth': 5,
'fillColor' : '#00880055'
}).then((circle: Circle) => {
marker.on('position_changed').subscribe((params: any) => {
let newValue: ILatLng = <ILatLng>params[1];
let newRadius: number =
this.spherical.computeDistanceBetween(center, newValue);
circle.setRadius(newRadius);
});
});

GroundOverlay

GroundOverlay
return this.map.addGroundOverlay({
'url': 'assets/imgs/newark_nj_1922.jpg',
'bounds': bounds,
'opacity': 0.5,
'clickable': true // default = false
});
}).then((groundOverlay: GroundOverlay) => {
// Catch the GROUND_OVERLAY_CLICK event
groundOverlay.on(GoogleMapsEvent.GROUND_OVERLAY_CLICK).subscribe(() => {
groundOverlay.setImage('assets/imgs/newark_nj_1922_2.jpg');
});
});

TileOverlay

TileOverlay
You can generate various URL
this.map.addTileOverlay({
getTile: (x: number, y: number, zoom: number) => {
return "http://tile.stamen.com/watercolor/" +
zoom + "/" + x + "/" + y + ".jpg";
},
// draw the debug information on tiles
debug: false,
opacity: 1.0
});

HtmlInfoWindow

HtmlInfoWindow
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
frame.innerHTML = [
'<h3>Hearst Castle</h3>',
'<img src="assets/imgs/hearst_castle.jpg">'
].join("");
frame.getElementsByTagName("img")[0].addEventListener("click", () => {
htmlInfoWindow.setBackgroundColor('red');
});
htmlInfoWindow.setContent(frame, {width: "280px", height: "330px"});
position: {lat: 35.685208, lng: -121.168225},
draggable: true,
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
htmlInfoWindow.open(marker);
});
});

Marker cluster

MarkerCluster
this.map.addMarkerCluster({
markers: data,
icons: [
{
min: 3, max: 9,
url: "./assets/markercluster/small.png",
label: { color: "white" }
},
{
min: 10,
url: "./assets/markercluster/large.png",
label: { color: "white" }
}
]
}).then((markerCluster: MarkerCluster) => {
markerCluster.on(GoogleMapsEvent.MARKER_CLICK).subscribe((params) => {
let marker: Marker = params[1];
marker.setTitle(marker.get("name"));
marker.setSnippet(marker.get("address"));
});
});

Geocoding

Geocoding
Geocoding for one address
// Address -> latitude,longitude
this.geocoder.geocode({
"address": this.search_address
})
.then((results: GeocoderResult[]) => {
console.log(results);
return this.map1.addMarker({
'position': results[0].position,
'title': JSON.stringify(results[0].position)
})
})
.then(...)

Batch geocoding
Pass locations as array
Get a mvc array first,
then `finish` event is
notified.
Just 1.9 sec!
this.geocoder.geocode({
// US Capital cities
"address": [
"Montgomery, AL, USA", "Juneau, AK, USA", ...
"Madison, WI, USA", "Cheyenne, Wyoming, USA"
]
})
.then((mvcArray: BaseArrayClass<GeocoderResult[]>) => {
});

BaseClass

All classes extend Base class
BaseClass
BaseArrayClass Marker
Circle Polyline Polygon
GroundOverlay TileOverlay MarkerCluster
Map

BaseClass
● set()
● get()
● bindTo()
● trigger()
● on() / addEventListener()
● one() / addEventListenerOnce()
● off()
● empty()
● destroy()

set() and get()
"Hello_changed" event occurs
obj.set(key, value, noNotify?)
obj.get(key)
let myObj: BaseClass = new BaseClass();
myObj.set("hello", "world");
console.log(myObj.get("hello"));

(key)_changed event
myObj.on("hello_changed").subscribe((params) => {
console.log(params);
});
myObj.set("hello", "world");
myObj.set("hello", "world2");
hello_changed
hello_changed

Status change event
marker.setPosition(...);
marker.setTitle("....");
position_changed
title_changed

Own property
position: { lat: 43.0741704, lng: -89.3809802},
count: 0
})
.then((marker: Marker) => {
marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
marker.set("count", marker.get("count") + 1);
});
marker.on("count_changed").subscribe((params: []) => {
let oldValue = params[0];
let newValue = params[1];
let key = params[2];
marker.setTitle("'" + key + "' is changed from '" +
oldValue + "' to '" + newValue + "'");
});
});

noNotify option
myObj.on("hello_changed").subscribe((params) => {
console.log(params);
});
myObj.set("hello", "world", true);
hello_changed
DO NOT
OCCUR

bindTo()
let objA: BaseClass = new BaseClass();
let objB: BaseClass = new BaseClass();
objA.bindTo("hello", objB, "world");
objA.set("hello", "こんにちは");
objB.get("world");
objA objB
hello world
"こんにちは" "こんにちは"
sourceObj.bindTo(targetKey, dest, destKey?, noNotify?)

bindTo()
position: {lat: 43.0741704, lng: -89.3809802},
draggable: true
})
.then((marker: Marker) => {
this.map.addCircle({
center: marker.getPosition(),
radius: 10,
fillColor: "rgba(0, 0, 255, 0.5)",
strokeColor: "rgba(0, 0, 255, 0.75)",
strokeWidth: 1
}).then((circle: Circle) => {
marker.bindTo("position", circle, "center");
});
});

trigger() obj.trigger(eventName, args?...)
createMarkers() {
let bounds = this.map.getVisibleRegion();
let sw = bounds.southwest, ne = bounds.northeast;
let diffY = (ne.lat - sw.lat), diffX = (ne.lng - sw.lng);
for (let i = 0; i < 10; i++) {
'position': {
'lat': sw.lat + diffY * Math.random(),
'lng': sw.lng + diffX * Math.random()
}
}).then((marker:Marker) => {
this.map.on('animate').subscribe((params: []) => {
let animation: string = params[0];
marker.setAnimation(animation);
});
});
}
}
onButtonClick() {
let btnTxt: string = event.srcElement.innerText;
this.map.trigger("animate", btnTxt);
}

Deep understanding
Internal command queue

All methods are executed in asynchronously!
…
})
exec("Map", "loadPlugin",
"Marker");
map.addMarker()
(native code)
.then((marker:Marker) =>
{
});

adding Marker after map.clear()
this.map.clear();
for (let i = 0; i < positions.length; i++) {
position: positions[i]
this.markers.push(marker);
});
}

map.clear() is slow...
Correct way:
this.map.clear().then(() => {
….
});
this.map.clear();
for (let i = 0; i < positions.length; i++) {
});
}

Command queue
map.clear()
addMarker()addMarker() addMarker() addMarker()
addMarker() addMarker()
addMarker()
addMarker() addMarker() addMarker()
Execute method in synchronous
(Stop all other methods)
addMarker()addMarker() addMarker() addMarker()
addMarker() addMarker()
addMarker()
addMarker() addMarker() addMarker()
Execute 10 methods in parallel at a once

Limit 10 is problem sometimes...
Sorry, there is no solution currently.

synchronous methods
● googleMaps.create()
● map.setCameraZoom()
● map.panBy()
● map.clear()
● map.setCameraTilt()
● map.setCameraBearing()
● map.moveCameraZoomIn()
● map.moveCameraZoomOut()
● map.animateCameraZoomIn()
● map.animateCameraZoomOut()
● map.animateCamera()
● map.moveCamera()
● map.setMyLocationEnabled()
● map.getMyLocation()
● map.remove()
● map.setDiv()

BaseArrayClass

BaseArrayClass
● insertAt()
● getArray()
● getAt()
● setAt()
● removeAt()
● getLength()
● reverse()
● sort()
● indexOf()
● empty()
● push()
● pop()
● map()
● mapAsync()
● forEach()
● forEachAsync()
● filter()
● filterAsync()

forEach() baseArray.forEach(fn)
0 1 2 3 4

forEach() baseArray.forEach(fn)
let baseArray: BaseArrayClass<ILatLng> = new BaseArrayClass(positions);
baseArray.forEach((position: ILatLng, idx: number) => {
});
});

forEachAsync()
0 1 2 3 4
baseArray.forEachAsync(fn).then()
Async task
(i.e. setTimeout())

forEachAsync() baseArray.forEachAsync(fn).then()
baseArray.forEachAsync((position: ILatLng, next:() => void) => {
next();
});
}.then(() => {
console.log('finish!');
});

0 1 2 3 4
a b c d e
a b c d e
map() baseArray.map(fn)

let baseArray: BaseArrayClass<Marker> = new BaseArrayClass(this.markers);
let titles: [] = baseArray.map((position: ILatLng, idx: number) => {
return this.markers[idx].getTitle();
});
map() baseArray.map(fn)

0 1 2 3 4
a b c d e
a b c d e
Async task
(i.e. setTimeout())
mapAsync() baseArray.mapAsync(fn).then()

baseArray.mapAsync((position: ILatLng, next: (result: any) => void) => {
}).then(next);
}).then(markers: Marker[]) => {
console.log('finish!');
});
mapAsync() baseArray.mapAsync(fn).then()

0 1 2 3 4
true false true false true
a c e
filter() baseArray.filter(fn)

filter() baseArray.filter(fn)
let matchedMarkers: [] = baseArray.filter((marker: Marker, idx: number) => {
return marker.get('category') === 'restaurant';
});

0 1 2 3 4
true false true false true
a c e
Async task
(i.e. setTimeout())
filterAsync() baseArray.filterAsync(fn).then()

filterAsync() baseArray.filterAsync(fn).then()
baseArray.filter((marker: Marker, next: (result: boolean) => void) => {
// i.e. Get data from remote database
http_request
.get('https://yourserver/getData/', {id: marker.get('dbId')})
.then((locationData: object) => {
// detect later
next(location.category === 'restaurant');
});
}).then(matchedMarkers: Marker[]) => {
console.log('finish');
});
Asynchronous
process

push(), pop()
let baseArray: BaseArrayClass = new BaseArrayClass();
baseArray.push('a');
baseArray.push('b');
baseArray.push('c');
baseArray.pop();
baseArray.pop();
baseArray.pop();
insert_at event
remove_at event

BaseArrayClass example
let points: ILatLng[] = [
{lat: 33.91636924837674, lng: -118.39605331420898},
{lat: 33.90205144970967, lng: -118.39639663696288},
{lat: 33.90190897196702, lng: -118.37905883789062},
{lat: 33.89471353635718, lng: -118.3787155151367}
];
this.map = this.googleMaps.create('map_canvas', {
camera: {
target: points
}
});
return this.map.addPolyline({
points: points
});
})
//continue to next page...

BaseArrayClass example
.then((polyline: Polyline) => {
let baseArray: BaseArrayClass<ILatLng> = polyline.getPoints();
baseArray.mapAsync((point: ILatLng, next: Function) => {
position: point,
draggable: true
}).then(next);
}, (markers: Marker[]) => {
markers.forEach((marker: Marker, idx: number) => {
marker.on('position_changed').subscribe((params: []) => {
baseArray.setAt(idx, params[1]);
});
});
// trigger the position_changed event for the first calculation.
markers[0].trigger('position_changed', null, markers[0].getPosition());
});
baseArray.on('set_at', () => {
this._ngZone.run(() => {
let distanceMeter: number = this.spherical.computeLength(baseArray);
this.distance = (distanceMeter * 0.000621371192).toFixed(2) + " miles";
});
});
});
polyline.getPoints() returns
BaseArrayClass
Calculate the distance
when any markers are dragged

Plugin repository
https://github.com/mapsplugin/
cordova-plugin-googlemaps
Official documents
https://github.com/mapsplugin/cord
ova-plugin-googlemaps-doc
Code repository
https://github.com/mapsplugin/ionic-
googlemaps-quickdemo
Google Developers Expert of
Google Maps API
Masashi Katsumata
Cordova GoogleMaps plugin
author
&

@Ionic native/google-maps

More Related Content

Similar to @Ionic native/google-maps

Recently uploaded

@Ionic native/google-maps