Yahoo!地図WEB APIへ超簡単に地図検索を実装
前回は「Yahoo!地図WEB APIでマップ表示」として、Yahoo! Open Local Platform(YOLP)のJavaScriptマップの基本について書きました。
今回はYOLPのJavaScriptマップ上に、地図検索機能を凄く簡単に実装する方法を書きたいと思います。
これを知ることで、YOLPに凄く惹かれていくことになるでしょう。
他にも魅力的な機能がテンコ盛りなのですが、まずは第1歩として地図検索に触れてください。
Yahoo!地図WEB API(YOLP)に地図検索機能を付ける
では早速Yahoo!地図に地図検索機能を付けてみましょう。
「Yahoo!地図WEB APIでマップ表示」の最終型のソースコードに追記する形にします。
見やすさを優先するため、若干表示サイズやズームスライダーを変えていますが、基本は同じです。
<body>
<div id="map" style="width:600px; height:400px"></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.SliderZoomControlHorizontal());
ymap.addControl(new Y.SearchControl());
}
</script>
</body>
</html>
上記のソースの【アプリケーションID】をご自身のIDに置き換えてHTMLとして保存し、ブラウザで表示すると下記のようになります。
赤字の部分をわずか1行追加しただけで、地図上に検索窓が付きました。
Google Mapsでこれを実現するには、Java Scriptを使用して自分でコーディングしなければなりません。
Google Mapsを使ってきた人にとっては、この簡単さは感動モノだと思います。
YOLPで表示した地図を住所や郵便番号で検索
では、早速どのような動作をするのか見ていきましょう。
まず住所で検索しますと、下記のような表示になります。
検索窓がスルスルと拡大しまして、該当する候補地が分類されて表示されます。
該当の場所がありましたらそのリンクを押すことで、下記のように目的地へ移動して拡大表示されます。
YOLPで表示した地図をキーワードで検索
検索は住所だけでなく、施設名などのキーワードでも検索可能です。
試しに「東京駅」で検索しますと、下記のような表示になります。
駅やランドマークなど、ジャンルに分類されて見やすく表示されます。
これだけのものが1行追加するだけで使用できますので、興味のある方は是非お試しください。
■関連記事
１．Yahoo!地図WEB APIでマップ表示
２．Yahoo!地図WEB APIへ超簡単に地図検索を実装
３．Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法
Tweet
|
||
| カテゴリー | ： | WEB API |
| キーワード | ： | WEB API,Yahoo!,地図,YOLP,Yahoo!地図WEB API |
コメントを記入する
コメントを受け付けました。
コメントは管理人の承認後、表示されます。
PHP自体は4年ほど触ってますが、触れる時間が少ない事もあってそこそこの技術力しかないです。
深夜12時に帰宅してから作業…ということも多いため、生産能力も著しく低いです。
こんな私ですが、今後もよろしくお願いします。
育児や仕事、日々思うことなどプライベートなブログはこちら。
イクメンはね丸の思うこと
@hanemaru_comをフォロー
