はね丸のWEB工房

Yahoo!地図WEB APIへ超簡単に地図検索を実装と題して、情報共有をします

はね丸のWEB工房WEB API>投稿記事を個別表示

このエントリーをはてなブックマークに追加

Yahoo!地図WEB APIでキーワード検索

前回は「Yahoo!地図WEB APIでマップ表示」として、Yahoo! Open Local Platform(YOLP)のJavaScriptマップの基本について書きました。
今回はYOLPのJavaScriptマップ上に、地図検索機能を凄く簡単に実装する方法を書きたいと思います。

これを知ることで、YOLPに凄く惹かれていくことになるでしょう。
他にも魅力的な機能がテンコ盛りなのですが、まずは第1歩として地図検索に触れてください。

スポンサーリンク

Yahoo!地図WEB API(YOLP)に地図検索機能を付ける

では早速Yahoo!地図に地図検索機能を付けてみましょう。
Yahoo!地図WEB APIでマップ表示」の最終型のソースコードに追記する形にします。

見やすさを優先するため、若干表示サイズやズームスライダーを変えていますが、基本は同じです。


<html>
<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として保存し、ブラウザで表示すると下記のようになります。

Yahoo!地図WEB APIで表示した検索窓

赤字の部分をわずか1行追加しただけで、地図上に検索窓が付きました。
Google Mapsでこれを実現するには、Java Scriptを使用して自分でコーディングしなければなりません。
Google Mapsを使ってきた人にとっては、この簡単さは感動モノだと思います。


YOLPで表示した地図を住所や郵便番号で検索

では、早速どのような動作をするのか見ていきましょう。
まず住所で検索しますと、下記のような表示になります。

Yahoo!地図WEB APIで住所検索

検索窓がスルスルと拡大しまして、該当する候補地が分類されて表示されます。
該当の場所がありましたらそのリンクを押すことで、下記のように目的地へ移動して拡大表示されます。

検索結果をYahoo!地図WEB APIで表示


YOLPで表示した地図をキーワードで検索

検索は住所だけでなく、施設名などのキーワードでも検索可能です。
試しに「東京駅」で検索しますと、下記のような表示になります。

Yahoo!地図WEB APIでキーワード検索

駅やランドマークなど、ジャンルに分類されて見やすく表示されます。
これだけのものが1行追加するだけで使用できますので、興味のある方は是非お試しください。



■関連記事
1.Yahoo!地図WEB APIでマップ表示

2.Yahoo!地図WEB APIへ超簡単に地図検索を実装

3.Yahoo!地図APIでマーカーをクリックすると吹きだしを出す方法


スポンサーリンク
hanemaru_comをフォローしましょう このエントリーをはてなブックマークに追加
カテゴリー WEB API
キーワード WEB API,Yahoo!,地図,YOLP,Yahoo!地図WEB API








※コメントは管理人の承認後、表示されます。

コメントを受け付けました。
コメントは管理人の承認後、表示されます。

表示順:新規順 | 投稿順 | 人気順 | 注目順


デル株式会社