マーカーの記述方法

概要

KsGMap では、自由にマーカーを設置することができます。
さまざまな色、形、大きさのマーカーを同時に表示させることができ、より効果的かつ独創的にマップ情報をユーザーに提供することができます。

Google と同じマーカーを使う場合と、KsGMap のサイトで配布しているセンターマーカーを利用する場合は、サンプルと同じものをそのまま使って問題ありません。

記述方法

JavaScript部分に下記の形式で記述して下さい。
KsGMapDataMarker( "【種類】" , "【アイコンファイル名】" , "【アイコンの影のファイル名】" , "【付加する文字】"   ,   【アイコン幅】 , 【アイコン高さ】   ,   【アイコン影幅】 , 【アイコン影高さ】   ,   【アイコンのアンカー位置X】 , 【アイコンのアンカー位置Y】   ,   【情報ウィンドウのアンカー位置X】 , 【情報ウィンドウのアンカー位置Y】 );
例:
KsGMapDataMarker( "ICON_A" , "./image/marker%count%.png" , "./image/shadow50.png" , ",A,B,C,D,E,F,G,H,I,J"   ,   20 , 34   ,   37 , 34   ,   10 , 34   ,   10 , 2 );
【種類】 マーカーの種類を指定します。
マーカーの種類は ksgmap_marker_key で指定したデータキーの値が入ります。
ksgmap_marker_key が icon の場合 <item … icon="ICON_A" …> の ICON_A です。

値は基本的に何でも可能ですが、半角英数字を推奨します。特に先頭に _ が付くのは将来的に KsGMap内部が利用する値とバッティングする可能性があるので、なるべく避けて下さい。

マーカーが 1種類 の場合は後述する _default にそのマーカーの情報を記述して下さい。
また種類には以下のように予約されているものがあります。

_default デフォルトマーカー(種類が未定義のマーカーなど)
省略時は Googleマップ のサーバーのアイコンになります。
_center センターマーカー(マップ中央の+印)
省略時はセンターマーカーは表示しません。
_composite 複合マーカー(Zマーキング機能で複数の種類のマーカーが一緒になった場合に表示)
省略時は、先に定義したマーカーが優先されます。
【アイコンファイル名】 そのマーカーのファイル名を指定します。
マーカーにA、B、C といった値が入る場合は、その部分を %count% にして下さい。

例:./image/marker%count%.png Aの場合 ./image/markerA.png

ヒント:表示頻度の低いマーカーでも、後ろ方のアルファベットが入りますので、同じ数だけ、マーカーを作成しておいて下さい。
【アイコンの影のファイル名】 マーカーの影のファイル名を指定します。
【付加する文字】 マーカーに表示するA、B、Cや1、2、3などを指定します。
半角英数字で、1文字毎にカンマで区切って下さい。一番左はしない場合(例えばZなど)用で、その次から1番目、2番目となります。

Ver 1.02~ なお、KsGMap Ver.1.02 以降は A,B,C,D など連続するアルファベットは、[A-D] と置き換えることができます。
【アイコン幅】
【アイコン高さ】
【アイコン影幅】
【アイコン影高さ】
アイコンとアイコンの影の幅と高さをピクセル数で指定します。
【アイコンのアンカー位置X】
【アイコンのアンカー位置Y】
【情報ウィンドウのアンカー位置X】
【情報ウィンドウのアンカー影位置Y】
アイコンのアンカー位置(座標の位置、通常マーカーの足の先)と情報ウィンドウのアンカー位置(情報ウィンドウが吹き出す場所)を指定します。左上が基点となります。

マーカーの位置解説

マーカーの位置解説図

アイテムナビの先頭をマーカー画像に変えるVer 1.01~

アイテムナビの各アイテムの先頭のアルファベットのテキストを、マーカー画像に変更することができます。

通常のマーカーを指定する際に、下記のコードも併せて指定します。【種類】と【付加する文字】は、対応するマーカーと同じにします。
マーカーと同じ画像を使うこともできますが、マーカーが大きい場合は、小さい専用のマーカーを用意しておくことをお勧めします。

KsGMapDataMarker( "itemnavi:【種類】" , "【アイコンファイル名】" , "" , "【付加する文字】" , 【アイコン幅】 , 【アイコン高さ】 );
例:
KsGMapDataMarker( "itemnavi:A" , "./image/marker_i_A%count%.png" , "" , ",A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z" , 20 , 23);