概要
Google Maps APIは予めマップの移動、ズーム変更、タイプ変更などのボタンを備えています。
しかし、よりオリジナルのデザインにしたい場合、汎用機能を使うことで新しいボタンなどを設置することが可能になります。
マップ操作
タイプの変更
ボタン:
<input type="button" onclick="KsGMapFunc.map.changeType( event , '【タイプ】' );" value="【任意の文字列】" />
アンカー:
<a href="" onclick="KsGMapFunc.map.changeType( event , '【タイプ】' );">【任意の文字列】</a>
セレクトボックス:
<select onchange="KsGMapFunc.map.changeType( event , this );">
<option value="【タイプ】">【任意の文字列】</option>
</select>
【タイプ】
|
マップのタイプを指定します。
タイプ | 内容 |
map | マップ(通常の地図) |
satellite | サテライト |
hybrid | デュアル |
|
【任意の文字列】
|
アンカーもしくはボタン上に表示する文字列を指定します。
|
ズームの変更
ボタン:
<input type="button" onclick="KsGMapFunc.map.changeZoom( event , '【ズーム値】' );" value="【任意の文字列】" />
アンカー:
<a href="" onclick="KsGMapFunc.map.changeZoom( event , '【ズーム値】' );">【任意の文字列】</a>
セレクトボックス:
<select onchange="KsGMapFunc.map.changeZoom( event , this );">
<option value="【ズーム値】">【任意の文字列】</option>
</select>
【ズーム値】
|
変更するズームの値を指定します。値は相対指定(現在のズームから値の分だけ変更)と絶対指定(値のズーム値に変更)の両方指定できます。
"+3" や "-3" など、プラス、マイナスが指定付いているものは相対指定、3 , 6 など数値だけの場合は絶対指定となります。
|
【任意の文字列】
|
アンカーもしくはボタン上に表示する文字列を指定します。
|
1画面分移動
ボタン:
<input type="button" onclick="KsGMapFunc.move.toNeighbor( event , '【方向】' );" value="【任意の文字列】" />
アンカー:
<a href="" onclick="KsGMapFunc.move.toNeighbor( event , '【方向】' );">【任意の文字列】</a>
セレクト:
<select onchange="KsGMapFunc.move.toNeighbor( event , this );">
<option value="【方向】">【任意の文字列】</option>
</select>
【方向】
|
移動する方向を英字で指定します。
方向 | 方向 |
north | 北 |
east | 東 |
south | 南 |
west | 西 |
|
【任意の文字列】
|
アンカーもしくはボタン、セレクトボックスに表示する文字列を指定します。
|
指定した位置に移動
単純に、特定の箇所に移動します。アンカータグ、ボタン、セレクトボックスが利用可能です。
下記のHTMLを記述して下さい。
アンカータグ:
<a href="" onclick="KsGMapFunc.move.toLatLng( event , 【緯度】 , 【経度】 );">【任意の名称】</a>
ボタン:
<input type="button" onclick="KsGMapFunc.move.toLatLng( event , 【緯度】 , 【経度】 );" value="【任意の名称】" />
toLatLng では緯度、経度の順で書きますが、toLngLat では経度、緯度の順で表記することも可能です(例参照)。なお、セレクトボックスは緯度、経度順のみです。
セレクトボックス:
<select onchange="KsGMapFunc.link.select( event , this );">
<option value="-">リンク先選択</option>
<option value="【緯度】,【経度】">【任意の名称】</option>
</select>
value="-" の項目は選択しても移動しません。
例:
<a href="" onclick="KsGMapFunc.move.toLatLng( event ,
40.73086 ,
-73.99759 );">
ワシントン・スクエア・パーク</a>
<input type="button" onclick="KsGMapFunc.move.toLngLat( event ,
138.73401 ,
35.35962 );" value="
富士山" />
<select onchange="KsGMapFunc.move.select( event , this );">
<option value="-">リンク先選択</option>
<option value="35.70236,139.75509">東京ドーム</option>
</select>
他のKsGMapにリンク
他の KsGMap を用いている地図に、現在地やズームをそのままでリンクする機能です。
KsGMap 以外の地図にリンクする『マップ・リンク・プラグイン』もあります。
アンカータグ、ボタン、セレクトボックスが利用可能です。
下記のHTMLを記述して下さい。
アンカータグ:
<a href="" onclick="KsGMapFunc.link.ksgmap( event , '【URL】' );">【マップ名称】</a>
ボタン:
<input type="button" onclick="KsGMapFunc.link.ksgmap( event , '【URL】' );" value="【マップ名称】" />
セレクトボックス:
<select onchange="KsGMapFunc.link.select( event , this );">
<option value="ksgmap,【URL】">【マップ名称】</option>
</select>
例(ボタン):
<input type="button" onclick="KsGMapFunc.link.ksgmap( event , 'http:/www.movies.ne.jp/theatermap/index.html' );" value="映画館マップ" />
セレクトボックスはマップ・リンク・プラグインと並べて書くことができます。
【URL】
|
リンク先のマップのURLを指定します。
|
【マップ名称】
|
マップの名称を指定します。
|
リンク先にはURLの引数にRefererを含ませるようになっています。