jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示するまで
梅酒.inの「梅酒がウリな飲食店」にてLightBoxを実現していることを前回説明しました。今回はさらに、jQueryでホットペッパーのAPIをリクエストしてGoogle ストリートビューを表示させる方法を説明をします。
↑ こんな感じ。(昼間の写真なのがちょっとあれですが)
ここではjQueryを用いているので、レスポンスのフォーマットとしてJSONPが利用できるホットペッパーのAPIを利用しています。
なお、jQueryのリファレンスは「jQuery 1.2.6 日本語リファレンス」が詳しいです。また、jQueryでJSONPを使う方法は「jQuery で JSONP ２通り – てっく煮ブログ」にて紹介されていたので、そちらを参考にやってみました。
また、ストリートビューをGoogle Maps APIから使う方法は「Google Maps API – Google Code (日本語)」と「MT22のメモ帳 » GStreetviewClient の使用例」に説明されています。
以下のサンプルでは、店舗のIDをキーとして取得したデータから緯度・経度を抽出して、それをもとに id=”streetview” の要素にストリートビューを表示させています。
$.ajax({
// APIのフロントエンド
url: 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/',
// JSONPを使う場合の指定
dataType: 'jsonp',
data: {
key: '[リクルートWEBサービスのキー]',
id: '[店舗のID]',
format: 'jsonp'
},
// レスポンスが返ってきたときの処理
success: function(json) {
var shop = json.results.shop[0];
var client = new GStreetviewClient();
var latLng = new GLatLng(shop.lat, shop.lng);
client.getNearestPanorama(latLng, function(res) {
if (res.code == 200) {
var panorama = new GStreetviewPanorama(document.getElementById('streetview'), {
latlng: res.location.latlng,
pov: res.location.pov
});
}
});
},
error: function() {
}
});
まあこれだけなのですが、このような処理をlightbox生成後の処理に入れてあげると、lightboxの中にストリートビューを表示といったことができます。
このように、レスポンスをJSONPで返してくれるAPIであれば、jQueryを利用して簡単にデータを取得することができて便利です。
著者について
コメントを残す