取得したカセットを使用した地図UIを作成する
JavaScriptマップAPIを利用することで、カセットサーチAPIで取得したカセット内の店舗情報を地図上に表示し検索できるUIを簡単に作成することができます。
YOLPカセットギャラリーでカセットを選択しダウンロードすることで、同様のUIを作成することができますが、今回はYOLPカセットサーチAPIを利用して「動的に」ページを作成してみます。
なお、本稿で紹介するサンプルコードの完成イメージを別途用意しましたので、以下の解説と合わせてご参照ください。
図1 完成イメージ
ソースコード（全体）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>カセットサーチAPI 「牛丼」検索サンプル - Yahoo! Open Local Platform</title>
<h1>カセットサーチAPI 「牛丼」検索サンプル</h1>
<script type="text/javascript" src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=＜あなたのアプリケーションID＞" charset="utf-8"></script>
</head>
<body>
<div id="_tab"></div>
<div id="_list" style="width:380px; height:600px;"></div>
<div id="_area" style="width:600px; height:600px;"></div>
</body>
<script type="text/javascript" charset="utf-8">
<!--
var $ = Y.useJQuery();
window.onload = function() {
// カセット検索APIで「牛丼」カセットを検索
var url = "http://cassette.search.olp.yahooapis.jp/OpenLocalPlatform/V1/cassetteSearch";
var param = {
query : "牛丼",
output : "jsonp",
appid : "OY1oDxsr"
};
$.ajax({
type : "GET",
url : url,
data : param,
dataType: "jsonp",
success: function(json){
if(!json.Feature){
window.alert("条件に該当するカセットが存在しません。");
}
display_map(json);
},
error: function(){
window.alert("カセットの取得に失敗しました。");
}
});
}
/**
* 取得したカセット情報を利用した地図とリストを表示
*/
function display_map(json){
// リスティングオブジェクトの生成
var list = new Y.Listing("_list");
//地図を初期化
var map = new Y.Map("_area", {configure:{doubleClickZoom:true, doubleClickPan:true, scrollWheelZoom:true}});
// カセット情報の取り出してレイヤーを作成
var cid = "";
var cids = new Array();
var layers = new Array();
$.each(json.Feature, function(){
// レイヤーを作成して追加
var layer = new Y.YolpSearchLayer({
chunk:true,
chunkCount:5,
searchBox:true,
cid:this.Id
});
layers.push({layer:layer, name:this.Name, default_query:''});
cids.push(this.Id);
});
cid = cids.join(",");
// 「すべて」レイヤーオブジェクトの初期化
var layerall = new Y.YolpSearchLayer({
chunk:true,
chunkCount:5,
searchBox:true,
cid:cid
});
layers.unshift({layer:layerall, name:'すべて', default_query:''});
// リスティングタブプラグインの設定
var listings = new Y.ListingTabPlugin({
tab :'_tab',
list:list,
current:layerall,
layers:layers
});
// プラグインの追加
map.addPlugin(listings);
//地図を表示
map.drawMap(new Y.LatLng(35.665627,139.730738), 18,Y.LayerSetId.NORMAL);
//コントロールの追加
map.addControl(new Y.LayerSetControl());
map.addControl(new Y.SliderZoomControl());
}
//-->
</script>
</html>
