Yahoo!地図情報のAPI(6) -アイコンを表示する- LUNARAVE WEBクリエーターの仕事と休息/ウェブリブログ

Yahoo!地図情報のAPI(6) -アイコンを表示する-

<< 作成日時： 2007/08/24 12:42 >>

少し前に"Yahoo!地図情報"のAPIを検証して間があいたが、APIコンテストや仕事で地図情報を扱う必要が再度出てきたのでまたテストを開始した。

今まで調べたところ、デフォルトで関西圏が表示され拡大・縮小スライダーを実装し、ボタンを押すと中心座標が表示される状態にしていた。

　地図サンプル

今度はこれに任意の場所にアイコンを表示させることにする。

ちなみに前回までカスタマイズしたソースは引き続き利用する。

地図を表示部分は以下の通りである。

window.onload=function(){
　_map = new YahooMapsCtrl("map", "34.4126484,135.3017939", 6);
　_map.setVisibleSliderbar(true);
　_map.setEnableWheelOperation(false);
}

これを以下のように追記する。

window.onload=function(){
　_map = new YahooMapsCtrl("map", "34.4126484,135.3017939", 6);
　_map.setVisibleSliderbar(true);
　_map.setEnableWheelOperation(false);

　centerIcon = [
　　{id:"cenIcon", pos:"34.4126484, 135.3017939", type:"L1"}
　]
　_map.addIcons(centerIcon);
}

追記した"centerIcon"にはアイコンを立てる座標とアイコンの種類を設定している。

アイコンの種類には大きいサイズのL1～L5、小さいサイズのS1～S5まで用意されている。

L1はレッド、L2はオレンジ、L3はグリーン、L4はブルー、L5はパープルとなっており、S系に関しても同様だ。

"_map.addIcons()"でアイコンを表示でき、()内にはアイコン情報の変数名を記入する。

この設定でブラウザで見ると以下のようになる。

　