Ionic framework is one of the popular hybrid framework, which is AngularJS and Apache Cordova base. @ionic-native/google-maps plugin is for the plugin of the ionic framework, it enables to embed native GoogleMaps view in applications easily. This slide introduces the overview of @ionic-native/google-maps plugin.
3. @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
14. Generate an API key
This is the API key
Restrict your key
when you
release your app
API key
15. 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
16. 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 {}
17. 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>
18. 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
19. 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
20. 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
21. src/pages/home/home.ts
API key Create project HTML & CSS Coding
import { GoogleMaps, GoogleMap, GoogleMapsEvent } from '@ionic-native/google-maps';
export class HomePage {
map: GoogleMap;
constructor( public navCtrl: NavController, private googleMaps: GoogleMaps ) { }
ionViewDidLoad() {
this.loadMap();
}
22. 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.');
});
}
API key Create project HTML & CSS Coding
23. Run it!!
$> ionic cordova run android
API key Create project HTML & CSS Coding Run it!
29. 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();
30. 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();