Yahoo!地図情報のAPI(8) -マーカーに吹き出しをつける- LUNARAVE WEBクリエーターの仕事と休息/ウェブリブログ

Yahoo!地図情報のAPI(8) -マーカーに吹き出しをつける-

<< 作成日時： 2008/04/14 12:37 >>

しばらく地図関連の記事を書いていなかったが、前回の記事以降にも"Google map"や"Yahoo!地図情報"を利用した案件をいくつかこなしてきた。

クライアントの好き嫌いや実装する仕様により"Google map"と"Yahoo!地図情報"のどちらかを選択するのだが、いまのところ"Google map"の利用の方が多い。

ネット上で"Yahoo!地図情報"の記事を探しても"Google map"に比べるとまだまだ少ないのだが、いざ利用するときに困らないように調査結果を残しておこうと思う。

前回までに以下の内容で"Yahoo!地図情報のAPI"を実装している。

・拡大・縮小スライダーの表示
・ボタンを押すと中心座標が表示される機能
・初期表示時に関西圏が表示される
・複数個所にアイコンを立たす。

　地図サンプル

今回は複数立っているマーカーそれぞれをクリックすると吹き出しが表示されるようにする。

前回で複数のマーカーを設定するために配列化させた。

　centerIcon = [
　　{id:"cenIcon01", pos:"34.40918669939271, 135.29959299788484", type:"L1"},
　　{id:"cenIcon02", pos:"34.4241123261143, 135.24009206420362", type:"L2"}
　]

この"pos"と"type"の間に"popup:○○"という形で表示させたい文字を入れるだけでよい。

　centerIcon = [
　　{id:"cenIcon01", pos:"34.40918669939271, 135.29959299788484", popup:"りんくうJCT", type:"L1"},
　　{id:"cenIcon02", pos:"34.4241123261143, 135.24009206420362", popup:"関西国際空港", type:"L2"}
　]

　地図サンプル