Google Maps の利用方法
Ionic から Google Maps を簡単に利用するためのプラグインが利用できます。
Android - Google Maps
ここでは Android をターゲットにして Google Maps を利用するためのプラグイン cordova-plugin-googlemaps の利用方法を説明します。
Google Maps API を利用するために、まずは API キーを取得する必要があります。
キーは Google Maps Android API のキー取得ページで取得できます。
キーの利用を特定のアプリケーションに制限する場合は、まず次の方法で SHA1 を取得します。
$ keytool -list -v -keystore ~/.android/debug.keystore -storepass android
このコマンドの結果から SHA1 を取得します。
次に Google の API マネージャで SHA1 とパッケージ名を入力します。
プラグインのインストール
キーを取得したら次の手順で、プラグインをインストールします。
$ ionic plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="キーはここ" $ npm install --save @ionic-native/google-maps
もし、バージョンに関する警告などが表示されたら package.json から @ionic-native/core のラインを消して、 再構成するとうまく行く場合があります。
$ npm install --save @ionic-native/core
利用サンプル
緯度、経度、及び住所情報をパラメータとして受け取り、その場所の地図を表示するページを作成してみましょう。
次のコマンドでページを追加します。
$ ionic g page mapPage
ページモジュール src/pages/map-page/map-page.module.ts は次の通り。
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MapPage } from './map-page';
@NgModule({
declarations: [
MapPage,
],
imports: [
IonicPageModule.forChild(MapPage),
],
exports: [
MapPage
]
})
export class MapPageModule {}
ページテンプレート src/pages/map-page/map-page.html は次の通り。
<ion-header>
<ion-navbar>
<ion-title>Map View</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div id="map"></div>
</ion-content>
map という id を持つ div 要素を作っています。ここに地図が表示されます。
スタイルシート src/pages/map-page/map-page.scss は次の通り。
page-map-page {
#map {
width: 100%;
height: 100%;
border: 1px solid #999;
}
}
height を設定しないと地図が見えないので注意してください。
コード src/pages/map-page/map-page.ts は次の通り。
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {
GoogleMaps, GoogleMap, GoogleMapsEvent,
LatLng, CameraPosition, MarkerOptions
} from '@ionic-native/google-maps';
@IonicPage()
@Component({
selector: 'page-map-page',
templateUrl: 'map-page.html',
providers: [ GoogleMaps ],
})
export class MapPage {
lat: number;
lng: number;
addr: string;
constructor(
private googleMaps: GoogleMaps,
public navCtrl: NavController,
public navParams: NavParams) {
this.lat = navParams.get("lat");
this.lng = navParams.get("lng");
this.addr = navParams.get("addr");
}
ngAfterViewInit() {
this.loadMap();
}
loadMap() {
let element: HTMLElement = document.getElementById('map');
let map: GoogleMap = this.googleMaps.create(element);
map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
let latLng: LatLng = new LatLng(this.lat,this.lng);
let cameraPosition: CameraPosition = {
target: latLng,
zoom: 15,
tilt: 30
};
map.moveCamera(cameraPosition);
let markerOptions: MarkerOptions = {
position: latLng,
title: this.addr
};
map.addMarker(markerOptions)
.then((marker)=>{
marker.showInfoWindow();
})
.catch((err)=>{
console.log(err);
});
});
}
}
さらにルートモジュール src/app/app.module.ts に上記のページモジュールを取り込みます。
...
import { MapPageModule } from '../pages/map-page/map-page.module';
@NgModule({
...
imports: [
HttpModule,
BrowserModule,
MapPageModule,
IonicModule.forRoot(MyApp)
],
...
以上で地図を表示するページができました。
この MapPage を呼び出すのは次のようなコードで呼びます。
import { MapPage } from '../map-page/map-page';
...
loc_lng: number;
loc_lat: number;
loc_addr: string;
constructor(
public navCtrl: NavController) {}
...
onCardClick(){
this.navCtrl.push(
MapPage,
{
lat: this.loc_lat,
lng: this.loc_lng,
addr: this.loc_addr,
});
}
}
ここでは lat に緯度 (latitude)、lng に経度 (longitude)、addr に住所 (文字列) をセットして渡しています。
map-page.ts のコンストラクタで NavParams を使って、これらの値を受け取っています。