KsGMap では、情報ウィンドウ内のHTMLは自由に作ることができます。
簡単なテンプレートを用いた方法から、JavaScriptを駆使した複雑な表現まで、多様な情報ウィンドウを作ることができます。
テンプレートはXMLファイルに通常のHTMLのまま記述します。
JavaScriptの知識は一切必要ありません。
XMLファイルのデザイン(<design>~</design>)部分に <template>![CDATA[ ~この部分にHTML~ ]]></template> で記述します。まず、例をご覧下さい。
テンプレートでは %データキー% が自動的にデータに置き換わります。
例えばデータキー name が ほげほげ の場合、%name% に ほげほげ が入り、前述の例の場合 <strong>ほげほげ</strong><br /> となります。
より複雑な情報ウィンドウを表現したい場合は、JavaScriptのユーザー関数部分でHTMLを生成します。
引数で、表示するアイテムのデータが配列で渡されます(詳しくは後述)。
戻り値で、情報ウィンドウ内のHTMLを返してください。
データ値は data[ データキー ] 変数の中に入っています。
例えば、 <item … address="東京都123" …> の場合 data[ "address" ] は 東京都123 となります。
これらの変数を加工し、出力するHTMLを生成します。
データの加工は通常のJavaScriptはもちろん、KsGMap内で便利な汎用関数も用意しています。詳しくは『汎用関数』をご覧下さい。
ユーザー関数からでもテンプレートを用いることができます。
一部のデータのみを加工して、HTMLの形式は一定のような場合は、便利です。
html = KsGMapCommon.Data.convTemplate( data );
で、html変数内には、テンプレート変換されたHTMLが代入されています。
尚、第二引数で、<template id="〔テンプレートID〕"> の〔テンプレートID〕を指定することで、複数のテンプレートを用いることもできます。
情報ウィンドウにタブを表示させることもできます。但し、後述の設定をしない限り初期値ではタブは表示されません。
KsGMap Ver 1.03 以前ではタブ機能はGoogle Maps API の非公開機能を利用していましたが、Ver 1.10 以降は公式の機能を利用しています。
それに伴い Ver 1.10 以降では設定値の ksgmap_infoWindow_tab_defaultVisible は廃止されました。
タブを指定する場合は
とカンマ区切りで、タブのラベルを指定します。Google Maps API の仕様上、現在のところ2つまでです。
以上で、タブが表示されるようになります。次に表示する内容ですが、現在のところテンプレートは仕えません。ユーザー関数を用いてください。
タブのページ番号は KsGMapMap.infoWindow.tabPage 変数に 1ページ目は 1、2ページ目は 2 と整数でページ番号が入っているので、それを参考にタブの内容を出力して下さい。
なお、このままでは、常にタブが表示されます。個々のデータに応じてタブの表示を決定したい場合は、
そのアイテムに他のタブの値が存在しない場合は、空文字( "" )を返すと、タブは表示されなくなります。
で初期表示をオフにします。
情報ウィンドウのユーザー関数の戻り値で、情報ウィンドウの有無を指定します。
【2つめのタブの有無】は 0 で非表示、1 で表示となります。なお、Zマーキング機能で複数のHTMLが同時に表示される場合は、一つでも表示があれば、タブは表示されます。