Ionic Native化されているCordovaプラグインは、皆さん御存知の通りnpmで簡単に使うことができます。
※Ionic Nativeとは、Ionicフレームワークの機能で、使用することでCordovaプラグインをIonicで簡単に使えるようになります。
これが非常に便利で、多くの便利なプラグインは、既にIonic Native化されています。Ionic NativeはIonic2から使える様になっています。
Ionic Nativeの場合
転載するまでもないんですが、Google Mapsを使うときは下記のような感じですよね。
$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
$ npm install --save @ionic-native/google-maps
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
CameraPosition,
MarkerOptions,
Marker
} from '@ionic-native/google-maps';
export class MapPage {
constructor(private googleMaps: GoogleMaps) {}
非Ionic Nativeの場合
Ionic Nativeで、殆どの機能が実装できるため、あえてNative化されていないCordovaプラグインを使う機会自体がそんなにないのですが、Open Street MapをベースにしたMapboxのプラグインを使う機会に出くわしました。
プラグインのインストール自体はIonicのCLIで
ionic cordova plugin add cordova-plugin-mapbox --variable ACCESS_TOKEN=your.access.token
というようにやればいいんですが、Ionicの便利な機能にあやかりまくっていたので、「あれ?Nativeじゃない時どうするんだ?」と手が止まりまして。
調べた結果が
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
declare var Mapbox:any;
このようにImport文の後に書いてあげるだけで、そのまま使えるようになります。
loadMap() {
Mapbox.show({...})
}
解説によっては、platformから持ってくるとか色々書いてあるところもありましたが、この方法が最もシンプルかつ簡単でした。