今回は、Google Mapsをデータベースとして設計する際に最も基本的な、マーカークリックによるウィンドウ表示を検討します。個人のホームページのレベルならば、これとコントローラーだけでも内容次第によってはGoogle Mapsで十分高度なものが作れるでしょう。
マーカーを打つための基本スクリプト（再出）
これまでと同様、html文を使ったインフォウィンドウ、タブインフォウィンドウについてだけ検討することにします。
以前の回の復習をすると、地図上にマーカーを打つための基本スクリプトは、以下のとおりでした。
|
var 変数a = new GLatLng( 緯度 , 経度 );
var 変数b = new GMarker( 変数a );
map.addOverlay( 変数b );
|
|
上の場合、アイコンファイルを具体的に指定していませんので、Google Mapsがデフォルトで用意するマーカーが出現します。
自分で用意したマーカーを用いるには、たとえば以下の通り書きます。ここでは、"icon"という変数がマーカーのために用意されています。
|
var icon = new GIcon();
icon.image = "本体のアイコンファイルのURL";
icon.shadow = "影のアイコンファイルのURL";
icon.iconSize = new GSize(20, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var point = new GLatLng(緯度, 経度);
var marker = new GMarker(point, icon);
map.addOverlay(marker);
|
|
マーカークリックで（タブなし）インフォウインドウを開く基本スクリプト
さて、マーカーをクリックしたらインフォウィンドウが表示される基本的なスクリプトは、以下の赤色の行を追加することになります。
変数"icon"は、デフォルトのアイコンを使う場合には省略できます。また、アイコンを指定するための行は、以下では省略しています。
|
var point = new GLatLng(緯度, 経度);
var marker = new GMarker(point[, icon]);
var html = 'html文';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html)
});
map.addOverlay(marker);
《インフォウィンドウにオプション値を指定する場合》
var infoopt = map.getInfoWindow();
infoopt.maxWidth = 横幅のピクセル数;
var point = new GLatLng(緯度, 経度);
var marker = new GMarker(point[, icon]);
var html = 'html文';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html, infoopt)
});
map.addOverlay(marker);
|
|
上の例では、オプションを用いない場合の変数として"point"、"marker"、（"icon"、）"html"、そして"map"の四つ（五つ）の変数が使われています。さらにオプションを用いるときには変数"infoopt"を用いて、都合五つ（六つ）の変数が使われています。このうち変数"html"が、マーカーをクリックするイベントを起こしたときに開くインフォウィンドウの内容を指定する、今回初出の部分のために用意されたものです。
前回までに取り上げたopenInfoWindowHtmlメソッドを、アイコンをクリックするイベントを起こしたときに発動させるGEvent.addListenerに組み込んだのが、上のスクリプトの内容です。次第にスクリプトが長くなってきましたが、変数を除けば式じたいの構造はきわめてシンプルなものです。変数の名前は作り手が（Javaの規則に応じていれば）自由に設定できるものなので、文字が多いからといって決して高度に複雑な内容ではありません。
マーカークリックでタブインフォウインドウを開く基本スクリプト
次に、マーカーをクリックしたらタブインフォウィンドウが表示される基本的なスクリプトは、以下の赤色の行を追加することになります。例は、二つのタブを持ったウィンドウです。また、オプション値を指定する場合には、横幅と最初に開くタブの番号のどちらか一つでも構いません。
変数"icon"は、デフォルトのアイコンを使う場合には省略できます。また、アイコンを指定するための行は、以下では省略しています。
|
var point = new GLatLng(緯度, 経度);
var marker = new GMarker(point[, icon]);
var infoTabs = [
new GInfoWindowTab("タブ名その１", html文),
new GInfoWindowTab("タブ名その２", html文)
];
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs[, tabinfoopt])
});
map.addOverlay(marker);
タブインフォウィンドウにオプション値を指定する場合
var tabinfoopt = map.getInfoWindow();
tabinfoopt.maxWidth = 横幅のピクセル数;
tabinfoopt.selectedTab = 最初に開くタブの通し番号;
var point = new GLatLng(緯度, 経度);
var marker = new GMarker(point[, icon]);
var infoTabs = [
new GInfoWindowTab("タブ名その１", html文),
new GInfoWindowTab("タブ名その２", html文)
];
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowTabsHtml(infoTabs, tabinfoopt)
});
map.addOverlay(marker);
|
|
上の例では、オプションを用いない場合の変数として"point"、"marker"、（"icon"、）infoTabs"、そして"map"の四つ（五つ）の変数が使われています。さらにオプションを用いるときには変数"tabinfoopt"を用いて、都合五つ（六つ）の変数が使われています。このうち変数"infoTabs"が、マーカーをクリックするイベントを起こしたときに開くタブインフォウィンドウの内容を指定する、今回初出の部分のために用意されたものです。
マーカークリックによるインフォウィンドウ表示の具体例
では、具体的にGoogle Mapsでマーカーをクリックしたときにインフォウィンドウを表示させる具体例を示します。下の例では、各々のアイコンをクリックすると、インフォウィンドウあるいはタブインフォウィンドウが表れます。
上の例のスクリプトの一部を、書き出してみました。一例としてインフォウィンドウとタブインフォウィンドウを、具体的に下のように書いています。
|
var infoopt = map.getInfoWindow();
infoopt.maxWidth = 100;
var tabinfoopt = map.getInfoWindow();
tabinfoopt.maxWidth = 140;
var icon1 = new GIcon();
icon1.image = "mitsu.png";
icon1.iconSize = new GSize(20, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);
var point101 = new GLatLng(34.9144141335787, 135.69767475128174);
var marker101 = new GMarker(point101, icon1);
var html101= '<img src="mitsu.png"><p><font size="3">明智光秀</font><p><font size="1">明智十兵衛。朝廷から惟任（これとう）の姓と日向守（ひゅうがのかみ）を賜り、惟任日向守と称される。<br>鉄砲の装備に熱心で、狭い平地での兵力集中決戦は自軍の強みを最も生かせる選択であっただろう。その意味では、この合戦の戦術的組み立ては間違っていなかった。しかし秀吉の反転が素早すぎて、勢いに押されて細川・筒井が離反してしまったことが余りに痛すぎた。もう少し敵側がぐずぐずしていたならば、一枚岩からは程遠い秀吉と織田信孝以下の諸将との間に離間策のくさびを打ち込むこともできたかもしれない。しかし秀吉は、そのような隙を作るような並の武将ではなかった。</font>';
GEvent.addListener(marker101, "click", function() {
marker101.openInfoWindowHtml(html101,infoopt)
});
map.addOverlay(marker101);
var point102 = new GLatLng(34.90634621832085, 135.6892204284668);
var marker102 = new GMarker(point102, icon1);
var infoTabs102 = [
new GInfoWindowTab("武将１", '<img src="mitsu.png"><p><font size="3">明智（溝尾）茂朝</font><p><font size="1">溝尾庄兵衛とも。明智家譜代。光秀浪人時代からの臣。山城衆と共に、中川清秀隊を右翼から淀川方面に押し込む。明智方にもうすこし予備兵力があれば、羽柴軍を包囲して壊走させることもできたかもしれない。'),
new GInfoWindowTab("武将２", '<img src="mitsu.png"><p><font size="3">伊勢貞興</font><p><font size="1">山城衆。旧足利家幕臣で、光秀の組下であった。'),
new GInfoWindowTab("武将３", '<img src="mitsu.png"><p><font size="3">諏訪盛直</font><p><font size="1">山城衆。旧足利家幕臣で、光秀の組下であった。'),
new GInfoWindowTab("武将４", '<img src="mitsu.png"><p><font size="3">御牧兼顕</font><p><font size="1">山城衆。旧足利家幕臣で、光秀の組下であった。')
];
GEvent.addListener(marker102, "click", function() {
marker102.openInfoWindowTabsHtml(infoTabs102,tabinfoopt)
});
map.addOverlay(marker102);
| | ≪以下のマーカー、ポリライン、ページ本文の叙述は省略します≫ |
|
|
次回は、クリック以外のイベントでインフォウィンドウを操作する方法について、検討します。