更新日: 2015年11月20日
jQuery & JavaScript

YahooのJavaScriptマップAPI(YOLP)で地図を描画

Yahoo の地図 API(YOLP)である JavaScriptマップAPI を使ってみたのでメモです。Yahoo API を利用するには、前もってアプリケーションIDを発行する必要があります。以下から取得できる。

アプリケーションの管理：Yahoo!デベロッパーネットワーク

以降、公式のドキュメントを参考に JavaScript で地図を描画してみました。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

Yahoo JavaScriptマップAPIのサンプル

公式ドキュメントは以下のページです。

YOLP(地図):Yahoo! JavaScriptマップAPI – Yahoo!デベロッパーネットワーク

書いてみたコード。東京ミッドタウン（緯度: 35.66572, 経度: 139.73100）の地図に、スライダーやラベルを付加して表示する例。

<!DOCTYPE html>
<html>
<body>

<div id="map" style="width:400px; height:300px"></div>
<script type="text/javascript" charset="utf-8" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=Yahoo API用のアプリケーションID"></script>
<script type="text/javascript">
    window.onload = function(){
        // 地図オブジェクトの初期化
        var ymap = new Y.Map("map", {
            configure : {
                // ダブルクリックでズームをON
                doubleClickZoom : true,
                // シングルクリックで移動をON
                singleClickPan : true
            }
        });
        // ズーム（拡大・縮小）用のスライダーを表示
        ymap.addControl(new Y.SliderZoomControlVertical());
        // レイヤーセット（地図/航空写真/地下街/雨雲レーダー）を表示
        ymap.addControl(new Y.LayerSetControl());
        // 緯度・経度の座標を指定
        var latLng = new Y.LatLng(35.66572, 139.73100)
        // 座標、ズームレベル、地図の種類を引数に指定して地図を描画
        ymap.drawMap(latLng, 17, Y.LayerSetId.NORMAL);
        // 指定した座標にラベルを追加
        var label = new Y.Label(latLng, "東京ミッドタウン");
        // ラベルを地図に表示
        ymap.addFeature(label);
    }
</script>

</body>
</html>