Yahoo!地図情報API公開! さっそく試してみました : アークウェブのブログ

Yahoo!地図情報API公開! さっそく試してみました

2006年12月15日

Yahoo!地図情報API公開! さっそく試してみました

投稿者竹村

SEの竹村です。

Yahoo!JAPANが、地図情報APIの公開をしました。

ヤフー、「Yahoo!地図情報」のAPIを無償公開
http://internet.watch.impress.co.jp/cda/news/2006/12/14/14246.html
Yahoo!デベロッパーネットワーク - Yahoo!地図情報
http://developer.yahoo.co.jp/map/

早速、地図の表示にトライしてみました。

▼Yahoo!地図
http://staff.ark-web.jp/~takemura/public/js/yahoomaps/

Yahoo!のAPIを利用するには、まずアプリケーションIDを登録してください。
その前に、Yahoo!JAPANのIDをとっていないようであれば取得してください。

▼Yahoo!JAPAN ログイン
https://login.yahoo.co.jp/config/login

次に、Yahoo!デベロッパーネットワークでアプリケーションIDを登録します。

▼アプリケーションID登録フォーム
http://api.search.yahoo.co.jp/webservices/register_application

なお、このアプリケーションIDはHTML中に直で表示されるので
Yahoo!JAPANのIDと同じパスワードなどを入れないように気をつけたいところです^^;

※GoogleMapsと異なり、IDがURL単位ではないところもご注意ください。
　利用制限については↓こちらを参照ください
　
　▼利用制限
　http://developer.yahoo.co.jp/search/rate.html

取得できたら、下記チュートリアルに習ってHTMLを書きます。

▼地図操作・アイコン表示
http://developer.yahoo.co.jp/map/map/V1/map.html

appid=YahooDemo　の部分を自分のIDに直すのを忘れないように！
そして、Webサーバへアップすれば(↓)地図表示が完成です。

▼Yahoo!地図 (表示させただけ)
http://staff.ark-web.jp/~takemura/public/js/yahoomaps/basic.html
地図の縮尺を大きくしていくと、六本木ヒルズの位置にアイコンが立っています。
マウスオーバーで吹き出しが表示されます。

※マウスオーバーでなく、クリックした時に吹き出しを表示することもできます。

また、Webアプリとして稼動させる場合は、クレジット表記を忘れずに。

▼クレジット表示
http://developer.yahoo.co.jp/attribution/

最初の地図には、下記のように設定してあります。

// アークウェブの近くを表示
map = new YahooMapsCtrl('map', '35.67063830229653, 139.77479730935804', 2);

// 縮尺にスライダーバーを付ける
map.setVisibleSliderbar(true);

// アイコンをクリックした時に吹き出しを出すようにする
map.setEnableClickPopup(true);

// 吹き出しアイコンを登録
var popup='アークウェブはこちらです。<br />東京都中央区銀座1-18-2　太平ビル6F';
map.addIcon('ark-web', '35.67063830229653, 139.77479730935804', popup, 'L1', 'アークウェブ');

// アイコン画像付き吹き出しアイコンを登録
var popupold='以前のアークウェブの場所はココでした。<br />東京都中央区銀座1-19-12　理研ビル6F';
map.addCategory('logo', 'https://www.ark-web.jp/content/style_v2/images/logo.gif', {width:80,height:20});
map.addIcon('ark-web_old', '35.67011446663644, 139.77410802758902', popupold, 'logo', '旧アークウェブ');

// マップ移動時にviewCenter関数を実行するイベント (2006/12/15 16:00 修正)
var event = map.addEvent(YEventType.MAP_MOVING, viewCenter);

ここから修正→
　　「イベント」はうまく動きませんでした…m(_ _)m
　　動作しました！イベントの定数はクラス名を書く必要があったらしいです。
　　マニュアルに値は記述してあったのですが、分かりませんでした。ご注意ください。
<-ここまで

また、緯度経度がGoogleMapsのものと異なるようでした。日本測地系でしょうか？

とりあえず、中心点の緯度経度を拾うメソッドはあるので、
「現在の位置」リンクをクリックした時に、中心点の緯度経度を表示するようにしてあります。

最後に、リファレンスマニュアルはこちら(↓)です。

▼Yahoo!地図情報 - リファレンスマニュアル
http://developer.yahoo.co.jp/map/reference.html

以上、拙速報告でした！

投稿者竹村 : 2006年12月15日 11:08

カテゴリー: XP・アジャイル(システム開発)

タグ： API , Webサービス , Yahoo! , 地図

« 前の記事：Ajax - LITBox(Lightbox風ダイアログ表示ライブラリ)の一歩先行く使い方
» 次の記事：Web 2.0化が進む旅行情報サイトの現状