[Gmaps.js] 地図をドラッグした後の中心座標を取得する

Google Maps Apiを簡単に使えるようにしてくれるJavaScriptライブラリのGmaps.jsで、地図をドラッグした後に中心座標を取得する方法についてのメモです。

var map = new GMaps({
  div: "#map",
  lat: 35.681111,
  lng: 139.766667,
  zoom: 15,
  idle: function(e) {// 地図が静止した瞬間にイベント発火
    var lat = e.getCenter().lat();// 緯度
    var lng = e.getCenter().lng();// 経度
  }
});

プロパティにGoogle Maps Apiで使えるイベントがそのまま指定できます。ドラッグに関連したイベントはdrag、dragstart、dragend、center_changed、bounds_changed、idleなどです。

ドラッグして動かした地図が静止した時の中心座標を求める場合はidleを設定します。その他のタイミングでイベントを発火させたい場合は表を参考に、上記コードの6行目のidleの部分を書き換えてください。

イベンド発生時はイベントプロパティに渡した無名関数にイベントオブジェクトが渡されるので、e.getCenter().lat()で中心の緯度、e.getCenter().lng()で経度が取得できます。

イベントプロパティについてより詳しくは公式レファランスを参照して下さい。また、イベントオブジェクトには緯度経度以外にもたくさんの値やメソッドが渡されていますが、それらについても公式を参照してください