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を利用して簡単にデータを取得することができて便利です。