前回は、一枚ページのインフォウインドウの開き方を見ました。今回は、タブのついたインフォウインドウを見ます。
前回に引き続いて、タブインフォウインドウについても、もっぱらhtmlを用いるopenInfoWindowTabsHtmlメソッドだけに集中して検討します。
タブインフォウインドウを開く基本スクリプト
Google Mapsには、openInfoWindowTabsとopenInfoWindowTabsHtmlの二種類のメソッドが用意されています。
openInfoWindowTabsは、DOM（Document Object Model）ノード形式でウィンドウ内の情報を記入するためのメソッドです。一方、openInfoWindowTabsHtmlは、html形式でウィンドウ内の情報を記入するためのメソッドです。
二つのタブを持ったインフォウィンドウの例を挙げます。再び最初に定義する地図を描くための変数を"map"とすると、それぞれを用いてウィンドウを表示するスクリプトは、以下のとおりです。
|
《openInfoWindowTabs》
var 変数a = new GLatLng( 緯度 , 経度 );
var 変数b = [
new GInfoWindowTab("タブ名その１", DOMノード ),
new GInfoWindowTab("タブ名その２", DOMノード )
];
map.openInfoWindowTabs(変数a, 変数b[, オプション値]) ;
《openInfoWindowTabsHtml》
var 変数a = new GLatLng( 緯度 , 経度 );
var 変数b = [
new GInfoWindowTab("タブ名その１", html文 ),
new GInfoWindowTab("タブ名その２", html文 )
];
map.openInfoWindowTabsHtml(変数a, 変数b[, オプション値]) ;
|
|
実際にはそれぞれの変数を一つにしても書けるのですが、後でウィンドウ内の情報を書き換えたりする際にわかりやすくなるため、上のように二つの変数を用いた方がよいと思います。
上における「変数a」は、ウィンドウごとに指定する緯度経度です。「変数b」は、タブの中身の情報の内容です。見てのとおり、タブ名とタブ内の情報（openInfoWindowTabsの場合はDOMノードで、openInfoWindowTabsHtmlの場合はhtml文）を各々記入する形式となっています。一番右の「オプション」は、タブなしのインフォウィンドウの場合と同様に、なくてもウィンドウが出せます。しかし、タブインフォウィンドウの場合には、ウィンドウの横幅を指定する際と、開いた時に選択されるタブを指定する際に必要となります。
タブインフォウインドウのhtml文の書き方
下をクリックすると、三つタブを持ったhtml文のタブインフォウィンドウの例が出てきます。ただし、前回のタブなしインフォウィンドウのオプションで取り上げた横幅の指定をすでに行なっています（140ピクセル）。
上のopenInfoWindowTabsHtmlを用いた例のスクリプトは、具体的に下のように書いています。緑の部分がタブ名で赤の部分がhtml文です。このように、タブの数が増えても new GInfoWindowTab("タブ名", html文 ) を繰り返すだけです。ただし最後のタブ以外は必ずカンマ（,）を末尾に付けてください。ｈｔｍｌ文の中身については、必ず前と後ろをクォーテーションマーク（'）で閉じてください。
|
var wdth01 = map.getInfoWindow();
wdth01.maxWidth = 140;
var infoTabs001 = [
new GInfoWindowTab("武将１", '<img src="hide.png"><p><font size="3">羽柴秀吉</font><p><font size="1">後の豊臣秀吉。事実上の総大将だが、名目上は信長の遺子で秀吉の養子である羽柴秀勝を擁する形を取っている。兵数は最大だが、実際の戦闘ではそれほど手勢が戦果を挙げていない。堀尾吉晴・山内一豊・石田光成・加藤清正など後に出世する配下の芋の子たちの中で、この戦いで独立して一軍を率いているのは中村一氏だけ。'),
new GInfoWindowTab("武将２", '<img src="hide.png"><p><font size="3">織田信孝</font><p><font size="1">織田信長の三男。四国攻めの総大将として大坂城にいたが、本能寺の変で軍勢は崩壊寸前となる。中国から大返しして来た秀吉軍に乗じて、十一日に残軍を合流させた。この戦いの勝利直後には、自分が当然織田家の後継者となると思っていたであろう。'),
new GInfoWindowTab("武将３", '<img src="hide.png"><p><font size="3">丹羽長秀</font><p><font size="1">信孝の目付として四国攻めに参加していた、織田家の宿老。なのに、合戦後の清洲会議では信孝を後継者に支持せず、幼年の三法師（織田信忠の孫で、織田家の嫡孫）を擁立しようとする秀吉に組する。賤ヶ岳合戦で敵前逃亡した前田利家と並んで、秀吉に織田家の天下を盗ませた最大の功労者＝Ａ級戦犯。')
];
var point001 = new GLatLng(34.89346406486655, 135.68012237548828);
map.openInfoWindowTabsHtml(point001,infoTabs001,wdth01);
|
|
最初に開くタブを指定する
openInfoWindowTabsHtmlメソッドでは、横幅の指定に加えて最初に開くタブを指定することができます。openInfoWindowTabsHtmlのオプションに、それぞれの値を投入する形式を取ります。以下のスクリプトで、横幅と最初に開くタブを指定できます。
|
var 変数v = map.getInfoWindow();
変数v.maxWidth = 横幅のピクセル数;
変数v.selectedTab = 最初に開くタブの通し番号;
var 変数a = new GLatLng( 緯度 , 経度 );
var 変数b = [
new GInfoWindowTab("タブ名その１", html文 ),
new GInfoWindowTab("タブ名その２", html文 ),
・
・
];
map.openInfoWindowTabsHtml(変数a, 変数b, 変数v) ;
|
|
上のスクリプトの青色の行が、横幅を指定するオプション数値です。そして紫色の行が、最初に開くタブを指定するオプション数値です。もちろんどちらか一つだけ指定して、他の行を削ってもかまいません。注意することとして、最初に開くタブの通し番号は、一番左（つまり、スクリプトでは一番上）が0となります。以下、1、2、、、、となります。
たとえば、上の例で横幅を140ピクセル、最初に開くタブを左から三つ目に指定するためには、このように書きます。オプションのための変数を"tabinfo01"とすれば、
|
var tabinfo01 = map.getInfoWindow();
tabinfo01.maxWidth = 140;
tabinfo01.selectedTab = 2
var infoTabs001 = [
new GInfoWindowTab("武将１", '<img src="hide.png"><p><font size="3">羽柴秀吉</font><p><font size="1">後の豊臣秀吉。事実上の総大将だが、名目上は信長の遺子で秀吉の養子である羽柴秀勝を擁する形を取っている。兵数は最大だが、実際の戦闘ではそれほど手勢が戦果を挙げていない。堀尾吉晴・山内一豊・石田光成・加藤清正など後に出世する配下の芋の子たちの中で、この戦いで独立して一軍を率いているのは中村一氏だけ。'),
new GInfoWindowTab("武将２", '<img src="hide.png"><p><font size="3">織田信孝</font><p><font size="1">織田信長の三男。四国攻めの総大将として大坂城にいたが、本能寺の変で軍勢は崩壊寸前となる。中国から大返しして来た秀吉軍に乗じて、十一日に残軍を合流させた。この戦いの勝利直後には、自分が当然織田家の後継者となると思っていたであろう。'),
new GInfoWindowTab("武将３", '<img src="hide.png"><p><font size="3">丹羽長秀</font><p><font size="1">信孝の目付として四国攻めに参加していた、織田家の宿老。なのに、合戦後の清洲会議では信孝を後継者に支持せず、幼年の三法師（織田信忠の孫で、織田家の嫡孫）を擁立しようとする秀吉に組する。賤ヶ岳合戦で敵前逃亡した前田利家と並んで、秀吉に織田家の天下を盗ませた最大の功労者＝Ａ級戦犯。')
];
var point001 = new GLatLng(34.89346406486655, 135.68012237548828);
map.openInfoWindowTabsHtml(point001,infoTabs001,tabinfo01);
|
|
下をクリックすれば、上の例を具体的に表示したページが表れます。
以上で、タブつき・タブなしのインフォウィンドウの表示について検討しました。
次回以降は、インフォウィンドウとマーカーとを連動させた表示方法について、検討します。