Google Mapsでタブ付Info Windowを使うHackの和訳

Google-Maps-APIグループでタブ付Info Windowを使うHackの説明ページを作ってる人がいたので、気まぐれに和訳してみた（わりといい加減）。なお、前のエントリの通り、早速Google Maps->Blogはタブ対応してます（下の説明の通り、イマイチuglyな見た目なんだけど）。
※同じ内容ですが、TEDDY-G隣家の記事の方が見やすいかもしれません。

-----
タブ付Info Window
タブ付Info Windowが使えるようになりました。現状、APIには呼び出し用の関数がなく、loadXML()から呼び出せるように設計されている様子ですが、ちょっとしたHackで使えるようになります。

サンプル

注意：このテクニックはGoogle Maps APIの機能として公式にドキュメント化されたものではありませんので、変更される可能性が高いです。

タブHTMLの設定方法
タブを利用するには、openInfoWindows()で指定するHTMLが次の形式に従っている必要があります。

1. HTMLは「page」属性を持つ2つの要素で始まらねばなりません。サンプルでは、Divタグを使っていますが、他の要素でも大丈夫です。

   <div page="1"></div><div page="2"></div>

2. 1で指定した2つの要素は「label」属性を持つ必要があります。label属性内で指定された名前が、タブで表示される文字になります。別々のマーカー上で同じタブ名を持つ必要はありません。
3. 1で指定した2つの要素には、「class="active"」の形でどちらのタブをアクティブにするか指定することができます。どちらの要素も「class="active"」で明示的に記されていない場合は、最初のタブがアクティブになります。
4. 上記の2つの要素を服むすべてのHTMLがInfo Windowのコンテンツになります。

タブ付Info WindowとタブなしInfo Windowは同じ地図上で混在させることができます。タブなしにしたいInfo Windowからは上記のコントロールをはずしてください。

タブの切り替え
タブを切り替えるには、openInfoWindowHtml()を再度設定し、呼び出す必要があります。全体の構造は同じでよいのですが、Info Windowのメインパネルを変更し、非アクティブになっていた要素の属性を「class="active"」に切り替える必要があります。

タブクリックハンドラ
タブをユーザーが変更できるようにするには、APIからContext（Google Mapsコントロール用のプロパティのひとつ）を受信する必要があります。まず、Info Window上のContextイベントを把握する関数を作成します。この関数は、次のような形式にて定義した上で、Info WindowのContextに追加します。

update_tabs = function(a,b,c) { ... }

この関数はAPI上で何度か呼ばれますが、我々がチェックする必要があるのは1番目のパラメータが「page」のときのみです。
1番目のパラメータが「page」の場合、2番目のパラメータはクリックされたタブのpage属性の値となっています。よって、この情報を新しいInfo Windowの内容を生成する際に利用すればよいのです。

Contextの設定
タブシステムはmap.infoWindow.infoWindoContractが「iwstate」Contextと「iwnavigate」 Contextに関数が設定されている場合にのみ動作します。「iwstate」には、ユーザーがタブをクリックした際に呼ぶべき関数を設定します。「iwnavigate」にはどの関数を設定すべきかは不明ですが、設定しない限り、infoWindow.showTabs()はうまく動きません。

iw = map.getInfoWindow();
w.addContext("iwstate",update_tabs);
w.addContext("iwnavigate",dummy_function);

map.getInfoWindow()はmap.infoWindowの存在を確認できる便利な側面を持っていますので、map.infoWindowではなくmap.getInfoWindow()を使うのがミソです。

ハマりがちな落とし穴

1. このテクニックを使う際には、APIのバージョンアップに注意してください。
2. 2つ以上のタブはうまく動きません。
3. 画面上に表示されるのはいずれかのタブの内容だけですが、Info WindowのinnerHTMLには常に両方のタブの内容が書き込まれています。ハマらないようにしてください。
4. map.infoWindowではなく、map.getInfoWindow()を使ってください。
5. 内容が短い場合、タブ付のマーカーはちょっとイマイチな見た目になります。少なくとも2行以上に渡る内容にしてください。

原文はこちら