新着記事
2009年04月14日

Yahoo!地図APIに挑戦

Yahoo! JAPAN Web API のアプリケーション ID を登録をしたのは、「ホームページ・ビルダー13」の「地図の埋め込み機能」を検証するためだけのつもりでした。しかしせっかくアプリケーション ID を取得したのだから利用するに越したことはないと思い直しました。解説サイトの「サンプルコード」を下敷きにしたら、アイコンと吹き出しの設置が案外簡単にできてしまったから、ということもあります。とにかく「できない」のは口惜しいので、Yahoo!地図API にチャレンジすることにしました。

ちなみに Google マップ API については、今のところチャレンジする気はありません。Google マップ API を利用せずとも Google マイマップで簡単に且つ API とほぼ同じことができるからです。
※ Google マイマップの使用方法ページへのリンクは前記事に載せましたが、再度掲げておきます。
Google マップで自分だけの地図を作成 - Google マップでコメントや画像付きのマイマップを作ってみませんか
マイマップの作り方/ビデオによる解説あり(Google マイマップ EXPO)

また、登山・ハイキングのサイトを作成しているため、山岳・山野エリアでの地図情報が Yahoo!地図のほうが Google マップより詳細で使い所があるという事情もあります。

というわけで、あらためて公式「Yahoo!地図APIマニュアル」と「地図スタッフブログ」、そしてふたつのYahoo!地図API解説サイトと首っ引きで、例によって試行錯誤をしています(笑)

Yahoo!デベロッパーネットワーク Yahoo!地図APIマニュアル
地図スタッフブログ
【特集】ゼロからはじめるYahoo! Maps API (1) Yahoo! Maps APIを使ってみよう - マイコミジャーナル
Yahoo!地図API入門

とりあえず「初期表示の中心位置にアイコン・吹き出しを表示する」のは一応クリアできているので、今度は複数のアイコンと吹き出しの設置に挑戦。

Yahoo!地図APIによる複数のアイコンと吹き出しの配置
Yahoo!地図API JavaScript版地図マニュアルから
○複数のアイコンを同時に配置する
・addIcons()を用いることで、複数のアイコンを同時に配置できます。
・addIcon()で一つ一つアイコンを配置するよりもaddIcons()を用いたほうが高速でアイコンを配置できます。
・引数にはアイコン情報が格納された配列を以下のように指定します。
addIcons(ary) についての詳細

理解できたかどうかより、サンプルコードさえあれば無敵です(笑)
で、サンプルコードを下敷きにして作成した自分の地図はこれ↓(アイコンが多いので読み込みが遅く重いかもしれません。いろいろな例をサンプルとして表示するのが目的の地図なので、その点ご理解ください)



Web Services by Yahoo! JAPAN

600px×300px サイズでの地図をHTMLページで作成しました。こちらは吹き出しのなかにリンクを貼った例も作成してあります。
地図表示用ページ

スクリプトが長い場合、短くまとめることもできます。
《参考》
ゼロからはじめるYahoo! Maps API (4) 複数のアイコンを表示するには - マイコミジャーナル での【サンプル04】
複数のアイコンを追加(addIconsメソッド) - Yahoo!地図API入門

もちろん外部scriptファイルにして、リンクで呼び出すのもOKです。

吹き出しのなかにテキストを表示させるまでは簡単でした。しかし画像を表示させようとするとエラーになり、地図そのものさえ表示しなくなり苦労しました。吹き出しのなかのデータ入力はHTMLタグが利用でき、ダブルクオーテーションマーク「""」のなかに記述するはずなのですが…。かなり試行錯誤した末「' コード '」のように右シングルクオーテーションマークで括ることで解決しました(地図表示用ページのソースで確認してください)。理由はもちろん解りません(笑)


「ポリライン、ポリゴンの表示」は少し面倒そうなので、次回のテーマは「表示させたい地図の中心位置やアイコンを配置したい位置の緯度経度の取得」について検討して書く予定です。なおもうしばらくはAPIでの地図作成やサイトでの利用にこだわっていきそうなので、ブログのカテゴリ「サイト制作試行錯誤」から地図関連の記事を、新カテゴリ「サイトに地図を貼る」としてまとめました。

※この記事での地図の、山行レポートはこちら
黒岳(御坂)(1) - 〔Let's take our time! ふたりで山歩き〕



拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 15:03 | Comment(0) | TrackBack(0) | サイトに地図を貼る | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

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

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。