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

しばらく地図関連の記事を書いていなかったが、前回の記事以降にも"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"}
 ]

 地図サンプル


"Yahoo!地図情報"もVer2になり、デザインも変わって見やすくなった。

多少機能も増えたようなので利用シーンが増えるかもしれない。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 6

驚いた
面白い
ナイス ナイス ナイス ナイス

この記事へのコメント

この記事へのトラックバック