マーカーを表示する:Google Maps Mobile SDK / Cordova(PhoneGap)

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

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

• Androidのインストール方法
• iOSのインストール方法

今回はマーカーを表示する方法です。

1. マーカーの表示

地図にマーカーを表示するには、MapクラスのaddMarker()メソッドを使用します。

var GOOGLE, GOOGLE_TOKYO, GOOGLE_SYDNEY;

document.addEventListener("deviceready", function() {
  //位置を定義
  GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
  GOOGLE_TOKYO = new plugin.google.maps.LatLng(35.660556,139.729167);
  GOOGLE_SYDNEY = new plugin.google.maps.LatLng(-33.867487,151.20699);


  //地図を作成
  var map = plugin.google.maps.Map.getMap();

  //地図の初期化完了を待つ
  map.addEventListener(plugin.google.maps.MAP_READY, onMapReady);
}, false);

function onMapReady(map) {
  //マーカーを追加する
  map.addMarker({
    "position": GOOGLE,
    "title": "Hello GoogleMap for Cordova!"
  });

  //地図を表示する
  map.showDialog();
}

実行結果

とても簡単でしょ？

2. コールバックでマーカーを受け取る

マーカーの作成は非同期で行われます。そのためマーカーのインスタンスは、コールバックを使って受け取ります。

//マーカーを追加する
map.addMarker({
  "position": GOOGLE,
  "title": "Hello GoogleMap for Cordova!"
}, function(marker) {
  //マーカーが地図に追加されたので、情報ウィンドウを表示する
  marker.showInfoWindow();
});

3. アイコンを変更する

マーカーのアイコン変更は簡単です。
アイコン画像のURLかファイルパスを指定してください。

map.addMarker({
  'position': GOOGLE_TOKYO,
  'title': 'Google Tokyo!'
  'icon': 'www/images/google_tokyo_icon.png'
});

4. アイコンのサイズを変更する

マーカーのアイコンサイズを変更したい場合もあるでしょう。
次のコードでできます。

map.addMarker({
  'position': GOOGLE_TOKYO,
  'title': 'Google Tokyo!',
  'icon': {
    'url': 'www/images/google_tokyo_icon.png',
    'size': {
      'width': 74,
      'height': 126
    }
  }
});

5.HTML5/Canvasの画像をマーカー/情報ウィンドウに設定する

このプラグインではマーカーと情報ウィンドウにBase64エンコードされた画像を設定することが可能です。

Base64エンコードされた画像は、HTML5/Canvasで生成することができます。
つまり プログラムから画像を生成して、マーカーに設定 することが可能です。

var canvas = document.getElementById("canvas");
map.addMarker({
  'position': GOOGLE_TOKYO,
  'title': canvas.toDataURL(),
  'icon': "data:image/png;base64,iVBORw0KGgoA...",
}, function(marker) {
  marker.showInfoWindow();
});

6. クリックした時にマーカーを削除

マーカーがクリックされると、 MARKER_CLICK イベントが発生します。

情報ウィンドウがクリックされると、 INFO_CLICK イベントが発生します。

map.addMarker({
  'position': GOOGLE_SYDNEY,
  "title": "Hello Google Maps"
}, function(marker) {

  marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
    alert("マーカーがクリックされた");

    //情報ウィンドウの表示
    marker.showInfoWindow();
  });
  marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {
    alert("情報ウィンドウがクリックされた");

    //マーカーを削除
    marker.remove();
  });
});

7.ドラッグ＆ドロップ

マーカーをドラッグ＆ドロップできるようにするには、draggable = trueにするだけです。

const GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
map.addMarker({
  'position': GOOGLE,
  'draggable': true
});

あとからMarker.setDraggable(boolean)で変更することもできます。

map.addMarker({
  'position': GOOGLE
}, function(marker) {
  marker.setDraggable(true);
});

8. ドラッグイベント

マーカーがドラッグされるとき MARKER_DRAG_START、ドラッグ中は MARKER_DRAG、ドロップされたときは MARKER_DRAG_ENDのイベントが発生します。

map.addMarker({
  'position': GOOGLE,
  'draggable': true
}, function(marker) {

  marker.addEventListener(plugin.google.maps.event.MARKER_DRAG_END, function(marker) {
    marker.getPosition(function(latLng) {
      marker.setTitle(latLng.toUrlValue());
      marker.showInfoWindow();
    });
  });
});

9. フラットなマーカー

地図の表示角度を変えたとき、地図と同じように角度が変わるマーカーを作成することができます。

const GOOGLE = new plugin.google.maps.LatLng(37.422858, -122.085065);
map.addMarker({
  'position': GOOGLE,
  'flat': true
});

10. イベント

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

• MARKER_CLICK
• INFO_CLICK
• MARKER_DRAG
• MARKER_DRAG_START
• MARKER_DRAG_END

marker.addEventListener(plugin.google.maps.event.MARKER_CLICK, function() {
  marker.showInfoWindow();
});

marker.addEventListener(plugin.google.maps.event.INFO_CLICK, function() {
  marker.hideInfoWindow();
});