Apache Cordova / PhoneGapでGoogle Mapsを表示します。

phonegap-googlemaps-pluginというプラグインを使用します。
インストール方法はこちらをご覧ください。
* Androidのインストール方法
* iOSのインストール方法

今回は地図の表示とカメラビューについて紹介します。

1.地図の作成

phonegap-googlemaps-pluginを使って地図を表示するには、まず最初にMapクラスのインスタンスを取得します。
準備に少し時間がかかるので非同期処理で行われます。準備が完了したらMAP_READYイベントが発生します。

//地図のインスタンスを取得します
var map = plugin.google.maps.Map.getMap();

//初期化が完了するのを待ちます
map.addEventListener(plugin.google.maps.event.MAP_READY, function(map) {

  //初期化が完了したら地図を表示します
  map.showDialog();
});

オプションを指定して地図を作成

地図を最初に表示する位置やコントロールの有無など、オプションを指定して地図を作成することもできます。

const GORYOKAKU_JAPAN = new plugin.google.maps.LatLng(41.796875,140.757007);

var map = plugin.google.maps.Map.getMap({
  'mapType': plugin.google.maps.MapTypeId.HYBRID,
  'controls': {
    'compass': true,
    'myLocationButton': true,
    'indoorPicker': true,
    'zoom': true
  },
  'gestures': {
    'scroll': true,
    'tilt': true,
    'rotate': true
  },
  'camera': {
    'latLng': GORYOKAKU_JAPAN,
    'tilt': 30,
    'zoom': 15,
    'bearing': 50
  }
});

2.カメラビューについて理解する

地図を表示する際に理解する必要があるのが、カメラビューです。
Google Maps SDKはビデオカメラを持っています。
そのビデオカメラを通して撮影されたものが、アプリ上に表示されていると考えてください。

そのビデオカメラの位置を制御するのには、target, zoom, tilt, bearingの4つのパラメータがあります。

targetは地図上のどの位置にビデオカメラの焦点を合わせるのかを緯度経度で指定します。

zoomはビデオカメラのズームです。

tiltは地図とカメラの垂直の角度です。0〜90度の範囲で指定します。

bearingは地図上辺を回転させる角度です。時計方向に0-359で指定します。マイナス値も指定できます。

3. カメラの移動

カメラを移動させるには、 moveCamera() か animateCamera() を使用します。

targetは必須です。
js
map.moveCamera({
"target": new plugin.google.maps.LatLng(...),
"zoom": 18,
"tilt": 45,
"bearing": 90
});

animateCamera()は次のように使えます。

map.animateCamera({
  "target": new plugin.google.maps.LatLng(...),
  "zoom": 18,
  "tilt": 45,
  "bearing": 90,
  "duration": 3000 //ミリ秒で指定。省略した場合、4000ミリ秒(4秒)
});

第2引数にコールバック関数を指定すると、移動が終了した時に呼び出されます。
js
map.animateCamera({
"target": new plugin.google.maps.LatLng(...),
"zoom": 18,
"tilt": 45,
"bearing": 90
}, function() {
alert("カメラ移動完了！");
});


4.現在のカメラ位置を取得する

カメラ位置を知りたい場合は、 getCameraPosition()を使用します。

map.getCameraPosition(function(camera) {
  var buff = ["Current camera position:\n"
      "latitude:" + camera.target.lat,
      "longitude:" + camera.target.lng,
      "zoom:" + camera.zoom,
      "tilt:" + camera.tilt,
      "bearing:" + camera.bearing].join("\n");
  alert(buff);
});

5.地図タイプの変更

地図タイルの種類を変更するには、 setMapTypeId()を使用します。
指定できる値は、ROADMAP, SATELLITE, HYBRID, TERRAIN, NONEです。

map.setMapTypeId(plugin.google.maps.HYBRID);

6. イベント

地図の状態が変化すると、イベントが発生します。
イベントを監視することで適切なタイミングで処理をすることができます。

• MAP_CLICK
• MAP_LONG_CLICK
• MY_LOCATION_CHANGE(Android)
• MY_LOCATION_BUTTON_CLICK
• CAMERA_CHANGE
• MAP_READY
• MAP_LOADED(Android)
• MAP_WILL_MOVE(iOS)

map.on(plugin.google.maps.event.MAP_LONG_CLICK, function(latLng) {
  alert("地図が長押しされました\n" +
        latLng.toUrlValue());
});