« 毛球寶兒2006/08/07 | メイン | Blond - ブロンド(髪の色) »

GoogleMaps活用するぞ!(17) - クリックした地点にマーカーを出してみよう

(カテゴリ:GoogleMaps

今回は、クリックした地点に新たにマーカーを出す(さらに、再度クリックしたときにマーカーを消す)操作について、検討します。


クリックした地点に新たにマーカーを出す


クリックした地点にマーカーを出すための基本スクリプトは、たとえば以下のとおりです。


GEvent.addListener(map, "click", function(任意の変数a, 任意の変数b) {
map.addOverlay(new GMarker(任意の変数b[, アイコン変数 ]))
});


Google Maps API Documentationには、このように説明されています。

ユーザーが地図をクリックしたときにアクションを引き起こすためには、GMap2インスタンスにクリックイベントのためのリスナー listener を登録してください。イベントが起ったとき、イベントハンドラーは二つの引き数 argument を受け取ります。すなわち、(クリックされたならば)クリックされたマーカーについての引き数と、クリックされた点のGLatLng(緯度経度変数)の引き数です。もしマーカーがクリックされないならば、第一の引き数はnull値です。

要は、ユーザーがクリックしたならば、GEvent.addListenerを通じて二つの引き数が発生します。一つはマーカーをクリックしたかどうかで決められる引き数であり、もう一つはどの緯度経度をクリックしたかで決められる引き数です。上の基本スクリプトで、任意の変数が二つ用意されているのは、まさしくこの二つの引き数を入れ込む変数なのです。しかし、二つの引き数を用意しますが、上のケースでは後で用いるのは二つ目の引き数、すなわちどの緯度経度をクリックしたかの引き数です。クリックした緯度経度に、新しくマーカーを出現させることになります。

また、今回のようなケースについては、変数をvar文で前もって定義する必要はなく、任意の文字で定義できます(ただし、Javaの規則に従う必要があります)。


例として、以下のように書けば、クリックした地点にマーカーを出現させることができます。緑字が任意に設定した一つ目の変数で、赤字が同じく任意に設定した二つ目の変数です。この例では、サーバーの同じディレクトリ=フォルダ内にマーカーアイコンと影のアイコンを用意して、アイコン変数"icon1"を定義して用いています。

var icon1 = new GIcon();
icon1.image = "gmred.png";
icon1.shadow = "gmshadow.png";
icon1.iconSize = new GSize(12, 20);
icon1.shadowSize = new GSize(22, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);


GEvent.addListener(map, "click", function(marker, point) {
map.addOverlay(new GMarker(point,icon1))
});


上のスクリプトを組み込んだ具体例を、下に示します。

Google Mapsの具体例:その9



クリックによって再びマーカーを消す


クリックして出したマーカーをクリックして消すには、たとえば以下のように書きます。

GEvent.addListener(map, "click", function(任意の変数a, 任意の変数b) {
if (任意の変数a) {
map.removeOverlay(任意の変数a);
} else {
map.addOverlay(new GMarker(任意の変数b[, アイコン変数 ]))
}
});


Javascriptの、if...else文が出てきました。あまり深く追求することはやめにして、ここでは「任意の変数a」に値があればremoveOverlayを発動させてマーカーを消し、そうでなければaddOverlayを発動させてマーカーを新たに出す式であることを理解するまでにしておきましょう。

例として、以下のように書けば、クリックした地点にマーカーを出現させて、かつマーカーをクリックすればマーカーが消えます。緑字が任意に設定した一つ目の変数で、赤字が同じく任意に設定した二つ目の変数です。同様にこの例でも、サーバーの同じディレクトリ=フォルダ内にマーカーアイコンと影のアイコンを用意して、アイコン変数"icon1"を定義して用いています。

var icon1 = new GIcon();
icon1.image = "gmred.png";
icon1.shadow = "gmshadow.png";
icon1.iconSize = new GSize(12, 20);
icon1.shadowSize = new GSize(22, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);

GEvent.addListener(map, "click", function(marker, point) {
if (marker) {
map.removeOverlay(marker);
} else {
map.addOverlay(new GMarker(point, icon1))
}
});


上のスクリプトを組み込んだ具体例を、下に示します。

Google Mapsの具体例:その10


ユーザーが任意にクリックした地点の情報として、事前に用意したテキストや画像のインフォウィンドウを示すことには限界があるでしょう。もう少し利用価値がありそうな情報を示す技として、次回ではウィンドウ内に拡大地図を出すshowMapBlowupメソッドを検討してみます。