« She Loves You - シー・ラブズ・ユー(歌曲) | メイン | 毛球寶兒2006/08/11 »

GoogleMaps活用するぞ!(18) - 地図入りウィンドウを出そう

(カテゴリ:GoogleMaps

今回は、showMapBlowupメソッドを使って地図入りウィンドウを出すことを、検討します。


showMapBlowupメソッド


showMapBlowupメソッドは、以下の数値を指定します。


showMapBlowup(緯度経度[, オプション値])


showMapBlowupメソッドは、これまで検討してきたopenInfoWindowHtmlメソッドやopenInfoWindowTabsHtmlメソッドなどと同様の取り扱いをします。だから、地図上に出したり、マーカーをクリックすれば出したりすることができます。オプション値もopenInfoWindowHtmlメソッドと同様のやり方で指定することができるとGoogle Maps API Documentationには書いてあるのですが、残念ながら今に時点で私が試してみた限りでは、うまく機能しません。どなたかshowMapBlowupメソッドのオプションの指定方法についてご存知の方がいらっしゃれば、ご教唆いただければ幸いです。



showMapBlowupメソッドを用いた具体例



(1)地図上をクリックすれば、地図入りウィンドウが出る例

この場合は、前回に見た、クリックすればマーカーが出る例の応用となります。

下に例のスクリプトを掲げます。GEvent.addListenerによって、クリックしたときにshowMapBlowup()メソッドをクリックした緯度経度(例では"point"という変数を使っています)で発動させます。気をつけなければならないのは、この場合にもshowMapBlowup()メソッドは地図全体の変数(GMap2を入れ込んでいる変数)に対して用いなければなりません(例では"map"という変数を使っています)。

GEvent.addListener(map, "click", function(marker, point) {
map.showMapBlowup(point)
});


上のスクリプトを組み込んだ具体例を、下に示します。(残念ながら盛岡市内は近接サテライトビューがありませんので、マップタイプコントローラーは省略しています。)

Google Mapsの具体例:その11



(2)マーカーをクリックすれば地図入りウィンドウが出てくる例

この場合は、マーカーをクリックしたときにインフォウィンドウを出す場合の応用となります。

下に例のスクリプトを掲げます(アイコンを定義する行は省略しています)。この場合は、上の(1)の例と違って、showMapBlowup()メソッドはマーカーの変数に対して用いることになります(例では、"marker101"という変数を用いています)。

var point101 = new GLatLng(39.70282845892489, 141.13758087158203);
var marker101 = new GMarker(point101,icon1);
GEvent.addListener(marker101, "click", function() {
marker101.showMapBlowup(point101)
});
map.addOverlay(marker101);


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

Google Mapsの具体例:その12


(3)一度クリックしてマーカーが出て、二度目のクリックで地図入りウィンドウが出てくる例

ちょっと高度な応用ですが、前回の例のif...else文を改造して、以下のように書いてみました。以下の"marker"と"point"は、(Javaの規則に従った)任意の変数を指定できます。

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


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

Google Mapsの具体例:その13


たとえばshowMapBlowupメソッドは、地図上にあらかじめ観光スポットなどを示したアイコンを打っておいて、ユーザーがクリックすればクリック地点近辺の拡大図を示すような設計にすれば使いようがあるかもしれませんね。

次回は、showMapBlowupメソッド以外の方法で、ウィンドウに地図を埋め込む方法を検討します。