情報ウィンドウのカスタマイズ

概要

KsGMap では、情報ウィンドウ内のHTMLは自由に作ることができます。
簡単なテンプレートを用いた方法から、JavaScriptを駆使した複雑な表現まで、多様な情報ウィンドウを作ることができます。

テンプレート

テンプレートはXMLファイルに通常のHTMLのまま記述します。
JavaScriptの知識は一切必要ありません。
XMLファイルのデザイン(<design>~</design>)部分に <template>![CDATA[ ~この部分にHTML~ ]]></template> で記述します。まず、例をご覧下さい。

例:
<design>
<template>![CDATA[
<div>
<strong>%name%</strong><br />
%address%<br />
<a href="%url%">関連リンク</a><br />
</div>
]]></template>
</design>

テンプレートでは %データキー% が自動的にデータに置き換わります。
例えばデータキー name が ほげほげ の場合、%name%ほげほげ が入り、前述の例の場合 <strong>ほげほげ</strong><br /> となります。

ユーザー関数

より複雑な情報ウィンドウを表現したい場合は、JavaScriptのユーザー関数部分でHTMLを生成します。

基本

引数で、表示するアイテムのデータが配列で渡されます(詳しくは後述)。
戻り値で、情報ウィンドウ内のHTMLを返してください。

function user_KsGMapItem_makeHTML( data ){
var html = "";
html = ~JavaScriptでデータを加工/HTMLを生成~;
return html;
}

データの変数(引数)

データ値は data[ データキー ] 変数の中に入っています。
例えば、 <item … address="東京都123" …> の場合 data[ "address" ] は 東京都123 となります。

これらの変数を加工し、出力するHTMLを生成します。

データの加工は通常のJavaScriptはもちろん、KsGMap内で便利な汎用関数も用意しています。詳しくは『汎用関数』をご覧下さい。

ユーザー関数でテンプレート

ユーザー関数からでもテンプレートを用いることができます。
一部のデータのみを加工して、HTMLの形式は一定のような場合は、便利です。

html = KsGMapCommon.Data.convTemplate( data );

で、html変数内には、テンプレート変換されたHTMLが代入されています。

尚、第二引数で、<template id="〔テンプレートID〕"> の〔テンプレートID〕を指定することで、複数のテンプレートを用いることもできます。

タブVer 1.01~

情報ウィンドウにタブを表示させることもできます。但し、後述の設定をしない限り初期値ではタブは表示されません。

KsGMap Ver 1.03 以前ではタブ機能はGoogle Maps API の非公開機能を利用していましたが、Ver 1.10 以降は公式の機能を利用しています。
それに伴い Ver 1.10 以降では設定値の ksgmap_infoWindow_tab_defaultVisible は廃止されました。

タブを指定する場合は

ksgmap_infoWindow_tab = "【ラベル1】,【ラベル2】";

とカンマ区切りで、タブのラベルを指定します。Google Maps API の仕様上、現在のところ2つまでです。
以上で、タブが表示されるようになります。次に表示する内容ですが、現在のところテンプレートは仕えません。ユーザー関数を用いてください。
タブのページ番号は KsGMapMap.infoWindow.tabPage 変数に 1ページ目は 1、2ページ目は 2 と整数でページ番号が入っているので、それを参考にタブの内容を出力して下さい。

なお、このままでは、常にタブが表示されます。個々のデータに応じてタブの表示を決定したい場合は、

KsGMap Ver 1.10以降の場合

そのアイテムに他のタブの値が存在しない場合は、空文字( "" )を返すと、タブは表示されなくなります。


KsGMap Ver 1.03以前の場合
ksgmap_infoWindow_tab_defaultVisible = 0;

で初期表示をオフにします。
情報ウィンドウのユーザー関数の戻り値で、情報ウィンドウの有無を指定します。

var result = new Object;
result.html = 【HTMLの値】;
result.tab = { 2 : 【2つめのタブの有無】 }
return result;

【2つめのタブの有無】は 0 で非表示、1 で表示となります。なお、Zマーキング機能で複数のHTMLが同時に表示される場合は、一つでも表示があれば、タブは表示されます。