【Javascript】Google Maps v2を設置する(3)

Google Maps v2を設置する(3)

---

1: ドラッガブルなマーカー
2: バージョンをチェックする
3: ソース1
4: ドロップ後情報ウインドウを表示する
5: ソース2

Google Maps APIの機能は、日々追加されています。Google Mapsのv2.61からは、マーカーをドラッグできるようになりました。 今回は、このドラッガブルな属性付のマーカーを使ってみます。

ドラッガブルなマーカー

今まで、Google Mapsのマーカーは、特別に自作しない限りドラッグはできませんでした。 しかし、v2.61からは、GMarkerの第二引数のGMarkerOptionsオブジェクトへdraggableプロパティを渡すことでドラッグを可能にすることができます。

百聞は一見にしかずですので、実際にマーカーをドラッグしてみましょう。



どうですか? 東京タワーの上の赤いマーカーをドラッグするとビヨンビヨンと弾みますね。今回はこれを使ってみます。

(* 上記サンプルは、前回のifarmeテクニックを使って読み込んでいます。実際のサンプルページはこちら →サンプル)

バージョンをチェックする

まず、APIを読み込むスクリプトタグのsrc属性に記述してある、URLのバージョン表記ですが、draggableな属性付のマーカーが利用できるのは、 v2.61以降ですから、バージョン表記は、下記のようにv2あるいはv2.61以上に設定されている必要があります。

  <!-- Google Maps APIの読み込み-->
  <script src="http://maps.google.com/maps?file=api&v=2&key=自分のキー" 
          type="text/javascript"></script>

  <!-- Google Maps APIの読み込み-->
  <script src="http://maps.google.com/maps?file=api&v=2.61&key=自分のキー" 
          type="text/javascript"></script>

実は、この機能は、v2.59からこっそりと実装されていますので、そのバージョンでも動作します。 ただし、公式に表明されているバージョンはあくまでもv2.61からですので、やはり、v2.61以降を指定しておくのが無難ではないかと思います。

ソース1

では、ソースを見てみましょう。

  <script src="http://maps.google.com/maps?file=api&v=2.61&key=自分のキー"
          charset="utf-8"
          type="text/javascript"></script>

    <-- ここに地図を表示します -->
    <div id="map" style="width:400px;height:300px"></div>

    <script type="text/javascript">
    //<![CDATA[

    //上記 id名map のDIVへv2の地図を表示できるようにします
    var map = new GMap2(document.getElementById("map"));
    
    //東京タワーの経度と緯度をセットします
    var tokyo = new GLatLng(35.65872,139.7454);
    
    //東京タワーを中心としてズーム値17で表示します
    map.setCenter(tokyo, 17);

    //draggable属性付きマーカーを東京タワーの場所へ生成します
    var marker = new GMarker(tokyo,{ draggable:true } );
    
    //マーカーを表示します
    map.addOverlay(marker);
    

    //]]>
    </script>

基本部分はこれだけです。 各スクリプトの意味は、コメントの通りですが、ドラッガブルマーカーのポイントは「GMarker」の第二引数 { draggable:true } の部分です。 このtrueをfalseに変えるか、あるいは、GMarker(tokyo)のように省略すればドラッグできなくなります。

また、bounceGravityというプロパティを併記することで、マーカードラッグ後のバウンドアニメの加速率を調整することもできます。 たとえば、{ draggable:true , bounceGravity : 4 } と書けば、少し早く弾むようになります。(デフォルトは1です)

この第二引数は、GMarkerOptionsというオブジェクトで、その仕様は、 公式リファレンス、あるいは 拙訳とサンプルなどご参照ください。

次ページで、参考までに、このマーカーを使って、ドラッグ後の経緯度を情報ウインドウで表示するサンプルを作ってみます。


Google Maps v2を設置する(3)

---

1: ドラッガブルなマーカー
2: バージョンをチェックする
3: ソース1
4: ドロップ後情報ウインドウを表示する
5: ソース2

マーカーをドラッグドロップするだけでは、おもしろくても、特に何の役にもたちませんので、とりあえず、ドロップした場所の経緯度を調べるスクリプトにしてみます。

ドロップ後情報ウインドウを表示する

地図上の意図をマークするオブジェクトGMarkerには、クリック時やマウスダウン時などをきっかけに何かを処理するためのイベントを設定できます。

そして、今回の、マーカードラッグが追加されたv2.61からは、それに関連する、「dragstart」「drag」「dragend」というイベントが追加されました。

それぞれの意味は名前の通り、「ドラッグ開始時に発生」「ドラッグ時に発生」「ドラッグ終了時に発生」となりますが、実装するには、たとえば、次のようにGEvent.addListenerメソッドを利用して、第二引数へこのイベント名を記述します。

    //マーカードラッグ開始で、現在開いている情報ウィンドウを閉じます
    GEvent.addListener(marker, 'dragstart', function() {
       map.closeInfoWindow();
    });

次のサンプルは、マーカーをドロップ後、経緯度を情報ウインドウへ表示するというものです。

ソース2

  <script src="http://maps.google.com/maps?file=api&v=2.61&key=自分のキー"
          charset="utf-8"
          type="text/javascript"></script>

    <-- ここに地図を表示します -->
    <div id="map" style="width:400px;height:300px"></div>

    <script type="text/javascript">
    //<![CDATA[

    var map = new GMap2(document.getElementById("map"));
    
    //東京タワー
    var tokyo = new GLatLng(35.65872,139.7454);
    //東京タワーを中心として表示します
    map.setCenter(tokyo, 17);

    //draggable属性付きマーカーを東京タワーの場所へ生成します
    var marker = new GMarker(tokyo,{ draggable:true } );
    //マーカーを表示します
    map.addOverlay(marker);
    

    //マーカードラッグ終了(dragend)で情報ウィンドウを開き、その座標を表示します
    GEvent.addListener(marker, 'dragend', function() {
    
      //マーカーの座標を取得します
      var point = marker.getPoint();
      
      //情報ウインドウ用のHTMLを作成します
      var latlng = "緯度"+point.lat()+"<br />経度"+point.lng()+"<br />"
      var msg = "この座標は<br />"+latlng+"です";
      
      //情報ウインドウを表示します
      marker.openInfoWindowHtml(msg);
    });

    //]]>
    </script>

このように、ドロップできるマーカーは、ユーザーによる位置入力のためのインターフェイスとしていろいろ利用できそうな気がします。

次回は、もう一度、このマーカー機能を利用して、ドロップ後にポリラインを引いてみるというスクリプトを書いてみます。

【関連リンク】
v2のドキュメントは下記にあります。
Google Maps API Version 2 Documentation

v2へのアップデートについての公式な注意書きは下記にあります。
Google Maps API Version 2 Upgrade Guide

v2に対応するリファレンスの、拙訳とサンプルが、下記にあります(拙著『入門Ajax』の追加サポートページです)。
Version 2 Class Reference (意訳とサンプル)

Google Mapsの設置方法自体はv1とほとんど変りませんのでは、下記の記事などもご参照下さい。
Google Maps 設置までの流れ