マーカーの追加

マーカーの追加

マーカーを追加してみましょう。Map上に設置されるマーカー(GMarker)やPolyline(GPolyline)はオーバーレイ・オブジェクトと呼ばれ、GMapクラスのメソッド(addOverlay、removeOverlay)を用いて追加、削除などを行います。

まず簡単に

var m = GMarker(new GPoint(-122.1419, 37.4419));
map.addOverlay(m);

とユーザプログラム領域の最後に追加してみましょう。マップの中心にマーカーが一つ表示されるようになるはずです。

クリックした場所の緯度、経度を得る

しかし、表示したい場所の緯度、経度など普通は知らないでしょう。そこで、ついでにマウスでクリックした場所の緯度、経度を表示するプログラムを作ってしまいましょう。クリックした位置へのマーカー表示も行ってみます。

まず、前回のクリックで追加したマーカーを記憶しておくための変数を用意します。

var prevMarker = null;

マウスクリックなどのイベントを取得するにはGEventを用います。以下のようにGEventのstaticメソッドaddListenerを用いてGMapオブジェクトmapへ「click」イベントのリスナを登録します

 GEvent.addListener(map, 'click', function(overlay, point) {
   document.F1.lng.value = point.x;
   document.F1.lat.value = point.y;
   var newMarker = new GMarker(point);
   if(prevMarker != null) {
     map.removeOverlay(prevMarker);
   }
   prevMarker = newMarker;
   map.addOverlay(newMarker);
 });

そうしたら、HTML上に適当なフォームを設け、テキストボックスを表示しましょう

 <form name="F1">
   longitude : <input type="text" name="lng" value=""> <br />
   latidute : <input type="text" name="lat" value=""> <br />
 </form>

これでクリックした場所にマーカーが表示されると同時にクリック箇所の緯度、経度がテキストボックスに表示されるはずです。

マーカー形状のカスタマイズ

これだけでもう位置を表示することはできますが、GMarkerオブジェクトのコンストラクタは2つまで引数を取ることができ、GIconオブジェクトを第2引数として渡すことでマーカーの形状をカスタマイズすることができます。

GIconオブジェクトはアイコンのサイズや画像を保持するオブジェクトです。試しにCreating Iconsにある通りにアイコンを作成してaddOverlay()してみましょう。先ほどより小さなマーカーが表示されるはずです。

アイコンには様々な画像が自由に使用できます。Documentationにある解説をよく読んで試してみてください。

Info Window(吹き出し)の表示

マーカーの上に出る吹き出しはGMarkerのopenInfoWindowHtmlメソッドを用いて表示します。GEventでマーカーがクリックされたときのイベントハンドラに上メソッドを記述して、マウスクリックしたときに吹き出しが出るようにしてみましょう。

先ほどのコードを書き換えて以下のようにします。

var m = GMarker(new GPoint(-122.1419, 37.4419));
GEvent.addListener(m, 'click',
                   function() {
                     marker.openInfoWindowHtml("This is Info Window");
                  });
map.addOverlay(m);

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2005-09-09 (金) 05:49:38