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());
});

地図操作を行う:Google Maps Mobile SDK / Cordova(PhoneGap)