YOLP（地図）
JavaScript版地図
Version 1 ｜ Version 2
リクエストURL
JavaScript
http://map.yahooapis.jp/MapsService/js/V2/
JavaScript版地図APIでは、ウェブページにYahoo!地図と同等機能の地図を埋め込むことができます。
JavaScript版地図APIでできること
- Yahoo!地図をウェブページに自由にはり付けて利用できます。
- JavaScriptで地図を操作することで、地図の複雑な処理が可能です。
- 地図上にアイコンでマーキングできます。
- ポリラインやポリゴンを地図上に表示できます。
- GeoRSSの情報を地図上に読み込み、表示することが可能です。
地図を表示する
地図の表示例
以下のような地図をウェブページにはり付けられます。
地図を表示する方法
Yahoo!地図をウェブページにはり付ける方法を以下で解説します。
- アプリケーションIDを取得する
Yahoo! JAPAN Webサービスのご利用には、アプリケーションIDを登録する必要があります。
登録は無料です。こちらで登録し、アプリケーションIDを取得してください。 - ウェブページに地図を表示する
- 以下のコードをテキストエディタにコピー＆ペーストするだけで地図を表示できます。
- 中心を六本木ヒルズとする横400ピクセル、縦300ピクセルの地図が表示されます。
※【APPID】は取得していただいたアプリケーションIDに置き換えてください。 - 初期表示の中心位置を変更する
- 初期表示の縮尺を変更する
- 上記サンプルコードの「ymap = new YahooMapsCtrl("map");」という部分を変更することで初期表示の縮尺を変更することが可能です。
※縮尺は1～11で設定できます（初期表示は 3 です）。 - 数値が小さくなるほど詳細、大きくなるほど広域の地図が表示されます。
- 「ymap = new YahooMapsCtrl("map");」の行を以下のように書き換えます。
以下の例は1段階詳細の地図を表示する例です。
- 上記サンプルコードの「ymap = new YahooMapsCtrl("map");」という部分を変更することで初期表示の縮尺を変更することが可能です。
- 初期表示の中心位置にアイコンを表示する
- 上記サンプルコードの「ymap = new YahooMapsCtrl("map");」の行を以下のように書き換えると、初期表示の中心位置（東京駅）にアイコンを表示することが可能です。
地図の操作説明
- マウスを使った操作
- センタリング - 地図をダブルクリックすると、ダブルクリックされた地点を中心に地図を移動できます。
- 地図の移動 - 地図をドラッグするとスクロール形式でマウスの動きにあわせて地図を移動できます。
- 縮尺の変更 - マウスホイールを使うことで縮尺を変更できます。
- 地図上のボタンなどの解説
- (1)スライダーバー
- 縮尺を切り替えられます。
- (2)地図モード切り替えボタン
- 地図モード/航空写真モードの切り替えができます。
- (3)中心点表示ボタン
- 中心点の表示/非表示を切り替えられます。
- (4)ホームボタン
- ホーム位置（初期表示の位置）に戻れます。
- (5)中心点
- 中心位置を示しています。
- (6)スケールバー
- 現在の縮尺での距離の目安を示しています。
- スライダーバーは、縮尺切り替えボタン
に変更することもできます。こちらで詳述します。 - 一部の機能は画面から消したり、種類を変更したりすることもできます。以下のページで詳述します。
- 中心点表示ボタンは初期状態では非表示であるため、表示するときは、setVisibleCentermarkButton()を用いる必要があります。
