http://api.search.yahoo.com/webservices/register_application
すでに、IDを登録してある場合にはIDとパスワードを入力します。未登録の場合は、ページの右上にある「Sign Up」のリンクをクリックします。クリックすると次のページが表示されます。必要な情報を入力します。入力が終わったら画面下にある「I Agree」ボタンをクリックします。
登録が終わると以下のような画面が表示されます。
次にアプリケーションIDを登録します。Yahoo Mapsで利用するappidは、このIDを示します。これは複数登録することができます（用途によって使い分けます）。
次にAjaxで利用する場合のAPIのページを参照しましょう。このページに基本的な使い方が掲載されています。
http://developer.yahoo.net/maps/ajax/index.html
注意：以下のサンプルでは私のサイトのAPI Keyになっていますが（緑色の部分）、もし私のサイト上にあるYahoo Mapsのサンプルを利用する場合には、この値は各自取得したアプリケーションIDに置き換えて下さい。
それでは、地図を表示させてみましょう。すでにGoogle MapsのAPI(スクリプト)を利用したことがある人なら、すぐに分かるでしょう。というのも、ほとんど同じだからです。まず、divタグを使って表示領域を作成します。表示する領域の大きさや位置はスタイルシートで設定します。サンプルでは直接divタグに書いていますが、別のスタイルシートファイルに分離しておく方が良いでしょう。
表示領域を用意したらスクリプトで表示する位置を決め、描画を行います。座標はYGeoPoint()で指定し、実際の表示はdrawZoomAndCenter()で行います。（実際のサンプルを実行する）
<html>
<head>
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=2.0&appid=openspaceYS"></script>
</head>
<body>
<div id="mapContainer" style="width:600px;height:600px"></div>
<script type="text/javascript">
var myPoint = new YGeoPoint(30, -97);
var map = new YMap(document.getElementById("mapContainer"));
map.drawZoomAndCenter(myPoint, 6);
</script>
</body>
</html>
[第15章 2:各種コントロールを表示するへ]
[目次へ]
(2006.2.28)