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

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

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

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

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

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

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

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

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

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

// アークウェブの近くを表示
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のものと異なるようでした。日本測地系でしょうか？

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