Yahoo!地図WEB APIでマップ表示
2011年10月27日くらいに発表されましたが、2012年1月1日からGoogle Maps APIが有料化されます。
もちろん無条件ではなく、1日に2万5000回以上アクセスした場合に課金対象となるようです。
個人であればほとんど関係ない数字ですが、もし超過した場合はAPIが利用できなくなるのではなく、強制課金という恐ろしい仕様…。
詳しいことは「Google Maps APIの有料化・料金・利用制限まとめ」でまとめられているようなので、興味のある方は見てみると良いかもしれません。
私のサービスも余裕だとは思うのですが、良い機会ですので他の地図サービスに目を向けてみることに。
そこでGoogle Maps APIの対抗馬、Yahoo! Open Local PlatformのJavaScriptマップを触ってみました。
Google Maps APIが先発ということもあり、Yahoo!地図WEB API(YOLP)の情報がかなり少なくて見つけにくいですね…。
Yahoo!地図WEB API(YOLP)を使う上で便利なサイト
少ない中でも参考になったのは、以下のサイトです。
Yahoo!デベロッパーネットワークJavaScriptマップ
Yahoo!デベロッパーネットワークJavaScriptマップAPIサンプル
Yahoo!デベロッパーネットワークJavaScriptマップリファレンス
まんま公式サイトで恐縮です。(笑)
日本語で書かれているので、かなりポイントが高いです。
しかし更新するリソースが足りないとかで、本当は実装されているけどドキュメントがない…というのもあるようですね。
またリファレンスも、初心者には敷居の高い記述だと感じました。
地図スタッフブログ
Yahoo!地図Web API(Yahoo!グループ)
リアルタイムな情報を知るには、上記のブログと掲示板ですね。
両方共にYahoo! JAPANの公式サイトです。
こちらの方が情報としての鮮度が高いですが、ちょっと偏りがあります。
ピンポイントの情報があったらラッキー、くらいで見ると良いです。(笑)
Yahoo!グループは自分でも質問できますので、時間はちょっとかかりますが解決策になると思います。
地図スタッフブログはYahoo!上で公開されている地図サービスを含めて書かれていますので、APIに特化した記事を見たい場合は、右にあるメニューで「API」を選んでください。
JavaScriptマップを使う上での注意事項
昔からYahoo!地図WEB API(YOLP)を使っている人にとっては当たり前のことかもしれませんが、私がハマッたポイントが１つだけ。
Yahoo!地図WEB API(YOLP)のJavaScriptマップには「Version 1」と「Version 2」が存在していましたが、2010年くらい？にリニューアルされ、なんと最新版は「Version 1」となります。(汗)
Yahoo!デベロッパーネットワークだけを見ていれば惑わされないのですが、検索で情報をいろいろ探しているとハマる可能性があります…。
しかも「Version 2」のリファレンスも残っているため、かなり紛らわしい。
「Version 2」を見つけた際は「バカめ、こんなもの隠していたのかヒヒヒ…」と思ったのですが、実は私がバカだったという。(笑)
地図スタッフブログには、かなり便利なTipsがソース付きで載っているのですが、ほとんどが旧タイプ「Version 2」のものであるため、変に期待しないように注意してください。
Yahoo!グループも同様です。
Yahoo!地図WEB API(YOLP)を使うための事前準備
Yahoo!の用意するAPI全般でそうなのですが、APIを使用するには「アプリケーションID」が必要となります。
これはJava ScriptベースのJavaScriptマップでも同様です。
つまりJavaScriptマップを使うと、アプリケーションIDが丸見えになります。
悪用されることも踏まえて、JavaScriptマップ専用でアプリケーションIDを1つ取る方がよいでしょう。
JavaScriptマップだけであれば利用制限がありませんので、最悪他人に使われてもよいのですが、そのIDをリクエスト制限のあるAPIで使われてしまうと厄介です。
アプリケーションIDを2つ取得し、使い分ける方が安全だと思います。
アプリケーションIDを取得するには、Yahoo! JAPAN IDが必要です。
Yahoo! JAPAN ID1つにつき、アプリケーションIDを10個まで取得できます。
アプリケーションIDの登録(無料)
上記ページで取得したアプリケーションIDは、「アプリケーションの管理」で見ることができます。
アクセス状況や、アプリケーションIDを削除することもできます。
悪用されてしまった場合、ここで該当のIDを削除してしまえば、相手のシステムも停止しますので警告にもなりますね。(笑)
YOLPのJavaScriptマップで単純な地図を表示
では早速Yahoo!地図を表示してみましょう。
最低限の地図を表示するには、下記のコードとなります。
<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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
}
</script>
</body>
</html>
上記のソースの【アプリケーションID】をご自身のIDに置き換えてHTMLとして保存し、ブラウザで表示すると下記のようになります。
Google Mapsと違い、何も指定しない状態ではかなりシンプルです。
地図以外に何も付きません。(笑)
赤字の「map」部分では、地図を表示する場所(divタグのid部分)を指定します。
名前はもちろんmap以外でも構いません。
赤字の「35.66572, 139.73100」部分では、地図の中心点となる緯度・経度を指定しています。
緯度・経度は度単位の数値として指定し、測地系はGoogle Mapsと同じ世界測地系となります。
赤字の「17」部分では、地図のズームレベルを指定しています。
1～20まで指定可能となり、数字が大きいほど地図が拡大されて表示されます。
ただし海外などは、あまり拡大できないようですね。
未対応のズームレベルを指定すると、グレーアウトします。
YOLPのJavaScriptマップでいろいろなインターフェースを表示
地図上に、いろいろなユーザーインターフェース(YOLPではコントロールと言う)を追加していきます。
まずは地図の中心位置を示すカーソル表示です。
<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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.CenterMarkControl());
}
</script>
</body>
</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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.CenterMarkControl());
ymap.addControl(new Y.HomeControl());
}
</script>
</body>
</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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.CenterMarkControl());
ymap.addControl(new Y.HomeControl());
ymap.addControl(new Y.LayerSetControl());
}
</script>
</body>
</html>
上記のソースをブラウザで表示すると、下記のようになります。
Google Mapsでも御馴染みの、表示するマップタイプを切り替えるボタンが右上に表示されます。
Google Mapsと同じように、衛星写真モードに切り替えることも可能です。
Google Mapsには無い、YOLP独自表示の「地下街」。
地下街のある場所に移動すると地下街ボタンが活性化し、ボタンを押すと上の画像のように地下街マップが表示されます。
画像は東京駅です。
気付いた方もいるかもしれませんが、注意事項があります。
このレイヤセットの切り替えボタンを表示すると、ホームアイコンの丸いボタンが下に隠れてしまいます。
丸いボタンの下の部分が微妙に見えていますので、押せることは押せます。(笑)
一応、それぞれの表示位置を自分で変えられるので回避はできるのですが、ちょっとバグに近いものだと思います…。
続いて、地図上の距離の目安となるスケールバーを表示です。
<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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.CenterMarkControl());
ymap.addControl(new Y.HomeControl());
ymap.addControl(new Y.LayerSetControl());
ymap.addControl(new Y.ScaleControl());
}
</script>
</body>
</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=【アプリケーションID】"></script>
<script type="text/javascript">
window.onload = function(){
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17);
ymap.addControl(new Y.CenterMarkControl());
ymap.addControl(new Y.HomeControl());
ymap.addControl(new Y.LayerSetControl());
ymap.addControl(new Y.ScaleControl());
ymap.addControl(new Y.SliderZoomControlVertical());
}
</script>
</body>
</html>
上記のソースをブラウザで表示すると、下記のようになります。
地図の左に、地図の縮尺を変更するためのスライダーが表示されます。
縮尺を変更するUIは全部で3種類あり、「Y.SliderZoomControlHorizontal」と指定すれば横長に、「Y.ZoomControl」と指定すれば＋と－ボタンだけのシンプルなものになります。
地図の表示面積に合わせて、適切なものを選べば良いと思います。
ちょと長くなりますので、一旦ここで切ります。
Yahoo! Open Local PlatformのJavaScriptマップについては、何回かに分けてジックリと説明したいと思います。
説明は次回に続きますが、Yahoo! Open Local PlatformのJavaScriptマップを使ってみた感想としまして、とにかく多機能です。
日本国内の地図をターゲットに使うのであれば、最強に近いですね。
まだ未体験の方は、是非1度触れてみることをオススメします。
■関連記事
１．Yahoo!地図WEB APIでマップ表示
２．Yahoo!地図WEB APIへ超簡単に地図検索を実装
３．Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法
Tweet
|
||
| カテゴリー | ： | WEB API |
| キーワード | ： | WEB API,Yahoo!,地図,YOLP,Yahoo!地図WEB API |
コメントを記入する
コメントを受け付けました。
コメントは管理人の承認後、表示されます。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。
こんな私ですが、今後もよろしくお願いします。
育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと
@hanemaru_comをフォロー
