【TypeScript】ionic2 で GoogleMapsAPI の使用例【Android/iOS】

こんにちは、Webチームの後藤です。

ionic2 内で GoogleMapsAPI の使用例です。
英語でなら情報いっぱいありますが、英語を読むのが精神衛生上よろしくないという方もいると思うので、
そういう人のお役に立つかなと思います。

ionic2 の始め方についてはこちらの記事が参考になるかと思います。

The Ionic Bookで覚えるIonicの使い方 by @tyoshikawa1106 on @Qiita
http://qiita.com/tyoshikawa1106/items/cec9e893cb7449ba9ce7
Angular 2 + Ionic 2 を始めました by @creativewebjp on @Qiita
http://qiita.com/creativewebjp/items/6986f97f8843e0157691

Plugin のインストール

Google Maps plugin for Cordova
という plugin を用います。
pluginを用いることによって、Android と iOS とで別々にコードを書く必要がなくなります。
また、これは Google Maps JavaScript API ではなく、ネイティブの Google Maps SDK を用いている為、
データ通信料を抑えることもでき、表示も素早く行われます。

$ ionic plugin add cordova-plugin-googlemaps

---

※この先、一度記述したコードは省略して書いていきます

マップを表示する

使い方は以下の通りです。
マップを表示したい場所に div 要素を設置し、
new GoogleMap('設置した div の ID'); すればよいです。
※公式サイトのサンプルコードだと GoogleMaps と "s" がついてる罠。そんなクラスないよ！

import {Component} from '@angular/core';
import {GoogleMap, GoogleMapsEvent} from 'ionic-native';

@Component({
	selector: 'map-canvas',
	template: '
<div id="map_canvas" style="height: 100%; width: 100%;"></div>

'
})
export class MapComponent {
	private map: GoogleMap;

	constructor() {
		console.log("map component constructor");

		this.map = new GoogleMap('map_canvas');
	}
}

表示位置を決定

マップの表示ができたら、今度は表示する位置を決めたいと思います。
初期の表示位置では緯度経度0度で世界地図が表示できる倍率になっています。
地図の中心位置と、倍率を定めましょう。

//GoogleMapsLatLng を新たにインポートします。
import {GoogleMap, GoogleMapsEvent, GoogleMapsLatLng} from 'ionic-native';

export class MapPage {
	constructor() {
		this.map = new GoogelMap('map_canvas');

		GoogleMap.isAvailable().then(() => {
			this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
				//GoogleMapsLatLng で座標オブジェクトを生成します。
				let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302');
				//GoogleMap.setCenter で中心座標を設定します。
				this.map.setCenter(myPosition);
				//GoogleMap.setZoom で倍率を設定します。数値を大きくするほど狭い範囲を表示します。
				this.map.setZoom(15);
			});
		});
	}
}

※ Promise を受け取る then メソッド

.then((/* Promise */) => { /** ...処理... **/ });

Promise.prototype.then()
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
アロー関数
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions

マーカーを設置する

マーカーを設置します。

//GoogleMapsMarkerOptions, GoogleMapsMarker を新たにインポートします。
import {GoogleMapsMarker, GoogleMapsMarkerOptions} from 'ionic-native';

export class MapComponent {
	private marker: GoogleMapsMarker;	//保持するための変数を宣言

	constructor() {
		GoogleMap.isAvailable().then(() => {
			this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
				let myPosition = new GoogleMapsLatLng('34.6687443', '135.4876302');
				this.map.setCenter(myPosition);
				this.map.setZoom(15);

				//マーカーを設置します。
				this.map.addMarker({
					position: myPosition	//GoogleMapsLatLng 型で緯度経度を指定します。
				}).then((marker)=>{
					this.marker = marker;	//this.marker に保持
				});
			});
		});
	}
}

マーカーをドラッグで移動できる様にする

マーカーを設置する際に this.marker に保持しておいたのは、この様に後から操作する為です。

//ドラッグできる様オプションを設定
this.marker.setDraggable(true);

マーカーを線でつなぐ

//GoogleMapsPolyline を新たにインポートします。
import {GoogleMapsPolyline} from 'ionic-native';

export class MapComponent {
	private positions: Array<GoogleMapsLatLng>;		//複数のポジションを保持する変数の型を宣言
	private markers: Array<GoogleMapsMarker>;		//複数のマーカーを保持する変数の型を宣言
	private poly_lines: Array<GoogleMapsPolyline>;	//複数のラインを保持する変数の型を宣言

	//複数のポジションを初期化
	this.positions = [
		new GoogleMapsLatLng('34.669', '135.485'),
		new GoogleMapsLatLng('34.68', '135.488'),
		new GoogleMapsLatLng('34.69', '135.485'),
		new GoogleMapsLatLng('34.66', '135.481'),
	];
	this.markers = Array();		//マーカーを保持する配列を初期化
	this.poly_lines = Array();	//ラインを保持する配列を初期化

	this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
		//ポジションにマーカーを設置
		this.positions.forEach((position) => {
			this.map.addMarker({
				position: position
			}).then((marker) => {
				this.markers.push(marker);	//設置したマーカーを保持
			});
		});

		//ポジション間にラインを設置
		this.positions.forEach((position, index, positions) => {
			this.map.addPolyline({
				if (index != 0) {
					points: [positions[index], positions[index-1]],		//線の始点と終点
					color: '#00A8E8',									//線の色
					width: 1											//線の太さ
				}
			}).then((poly_line) => {
				this.poly_lines.push(poly_line);	//設置したラインを保持
			});
		});
	}
}

円を設置する

//新たに、GoogleMapsCircle をインポートします。
import {GoogleMapsCircle} from 'ionic-native';

export class MapComponent {
	private circle: GoogleMapsCircle;		//円を保持する変数の型を宣言

	this.map.one(GoogleMapsEvent.MAP_READY).then(() => {
		//円を設置
		let circle_position = new GoogleMapsLatLng('34.6687443', '135.4876302');
		this.map.addCircle({
			center: circle_position,	//円の中心座標を設定
			radius: 100,				//円の半径を設定(m単位)
			strokeColor: '#f53d3d',		//円の外周の線の色を設定
			strokeWidth: 1,				//円の外周の線の太さを設定
			fillColor: '#E6F7FF'		//円の内側の色を設定
		}).then((circle) => {
			this.circle = circle;	//設置した円を保持
		});
	}
}

その他

また書くかもしれませんが、これら以外のことをしたいという方は
{project}/node_modules/ionic-native/dist/plugins/googlemaps.d.ts
を読むと良いです。

こんな感じで色々メソッドがあります。

/**
     * Get the visible region
     */
    getVisibleRegion(): Promise<VisibleRegion>;
    showDialog(): void;
    closeDialog(): void;
    getLicenseInfo(): Promise<string>;
    setCenter(latLng: GoogleMapsLatLng): void;
    setZoom(zoomLevel: number): void;
    setMapTypeId(typeId: string): void;
    setTilt(tiltLevel: number): void;
    animateCamera(cameraPosition: CameraPosition): void;
    moveCamera(cameraPosition: CameraPosition): void;
    setMyLocationEnabled(enabled: boolean): void;
    setIndoorEnabled(enabled: boolean): void;
    setTrafficEnabled(enabled: boolean): void;
    setCompassEnabled(enabled: boolean): void;
    setAllGesturesEnabled(enabled: boolean): void;
    addMarker(options: GoogleMapsMarkerOptions): Promise<GoogleMapsMarker>;
    addCircle(options: GoogleMapsCircleOptions): Promise<GoogleMapsCircle>;
    addPolygon(options: GoogleMapsPolygonOptions): Promise<GoogleMapsPolygon>;
    addPolyline(options: GoogleMapsPolylineOptions): Promise<GoogleMapsPolyline>;
    addTileOverlay(options: GoogleMapsTileOverlayOptions): Promise<GoogleMapsTileOverlay>;
    addGroundOverlay(options: GoogleMapsGroundOverlayOptions): Promise<GoogleMapsGroundOverlay>;
    addKmlOverlay(options: GoogleMapsKmlOverlayOptions): Promise<GoogleMapsKmlOverlay>;
    setDiv(domNode: HTMLElement): void;
    setVisible(visible: boolean): void;
    setOptions(options: any): void;
    setBackgroundColor(backgroundColor: string): void;
    setPadding(top?: number, right?: number, bottom?: number, left?: number): void;
    clear(): void;
    refreshLayout(): void;
    fromLatLngToPoint(latLng: GoogleMapsLatLng, point: any): Promise<any>;
    fromPointToLatLng(point: any, latLng: GoogleMapsLatLng): Promise<GoogleMapsLatLng>;
    toDataURL(): Promise<any>;
    remove(): void;
    panBy(): void;

これらの下の方にオプションの定義があるので、それを見たら何となーく使えるでしょう！！

以上です！！