2014/03/30

Foursquare APIを使ってVenue一覧を表示する

 Foursquare

 2017/02/04
Google Mapsの各種APIを使用する際にAPIキーが必要になった為、該当箇所を修正しました。
また、同APIで現在地を取得する為には、セキュア通信(https)が必要になりました。

Foursquare APIの「Search Venues」を使用して、Venue一覧を表示したいと思います。

以下の例では、現在地周辺のVenueを表示します。
APIのGETパラメータに、現在地の緯度経度、カテゴリ等を指定して、Venue一覧を取得します。

APIを使用するには、client id, client secretという２つの項目が必要になります。
FoursquareのIDを取得した上で、開発者としてエントリーするとこの項目を取得できます。



サンプルコード - 現在地取得(JavaScript/jQuery)
// ページ読込時に現在地取得
$(document).ready(function(){
   navigator.geolocation.getCurrentPosition(getPosition, errPosition);
});

function getPosition(p){

   // 現在地取得ＯＫ時の処理
   var lat = p.coords.latitude;
   var lng = p.coords.longitude;

   // 緯度経度セット
   $("#latitude").val(lat);
   $("#longitude").val(lng);
}

function errPosition(p){
   // 現在地取得エラー時の処理
}



サンプルコード - HTML  Google Maps JavaScript APIの定義を修正(xxxxxはAPI Keyを指定)
// GoogleMapsAPI定義
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxxxx"></script>

･････

// 緯度経度を保持する項目
<input type="hidden" id="latitude">
<input type="hidden" id="longitude">



サンプルコード - Venue一覧取得(JavaScript/jQuery)

// パラメータ設定
client_id     = "XXXXX";
client_secret = "XXXXX";
version       = "YYYYMMDD";
intent        = "browse";
categoryId    = "4bf58dd8d48988d1e0931735"; // この例ではコーヒーショップ
limit         = "10";                       // 取得件数(MAX:50)
radius =        "400";                      // 指定緯度経度からの距離(m)
// query = "";                              // キーワードで絞込みする場合は指定

search_url = "https://api.foursquare.com/v2/venues/search";
search_url = search_url + "?client_id=" + client_id;
search_url = search_url + "&client_secret=" + client_secret;
search_url = search_url + "&v=" + version;
search_url = search_url + "&radius=" + radius;
search_url = search_url + "&intent=" + intent;
search_url = search_url + "&categoryId=" + categoryId;
search_url = search_url + "&limit=" + limit;
search_url = search_url + "&ll=" + $("#latitude").val() + "," + $("#longitude").val(); // 緯度経度を指定
// search_url = search_url + "&query=" + query;

$.ajax({
   type: 'GET',
   url: search_url,
   dataType : 'json',
   success: function(json, status){
      var len = json.length;

      venues = json['response']['venues'];
      jQuery.each(venues, function(cnt, venue) {

         alert(venue['id']);                        // VenueID
         alert(venue['name']);                      // 名称
         alert(venue['url']);                       // お店・会社等のURL
         alert(venue['location']['postalCode']);    // 郵便番号
         alert(venue['location']['cc']);            // 住所(CountryCode)
         alert(venue['location']['state']);         // 住所(state)
         alert(venue['location']['city']);          // 住所(city)
         alert(venue['location']['address']);       // 住所(address)
         alert(venue['location']['crossStreet']);   // 住所(crossStreet)
         alert(venue['contact']['formattedPhone']); // 電話番号

      });
   },
   error: function(XMLHttpRequest, textStatus, errorThrown) {
     // エラー処理
   },
   complete : function(data) {
     // Ajax通信完了
   }
});


パラメータのcategoryIdは任意指定です。categoryIdはAPI「Venue Categories」で取得できます。
表示されるVenueの並び順は、現在地に近い順というわけではないので、「すぐ近くにあるのに取得できない」といったことも有り得ます。
半径(radius)を狭めたり、limitを増やしたりすることにより、近くのお店が取得できるようになるようです。

また現在地でなく、指定した住所（地域）のVenueを取得したい場合は、パラメータに &near=xxx を指定します。(&ll=の代わりに）
ただ、何でも良いということでもないようで、「吉祥寺,東京」「千代田区,東京」といったように、市区町村名 or 知名度のある地域を正確に指定しないと取得できないようです。

パラメータのqueryは、Venueを絞込みする時に使用します。（starbucks etc.)

VenueIDは、チェックイン処理に展開したりする場合に利用します。

Venueの情報については、永続的なデータ（RDB等）として保存することは推奨されていない（禁止？）ようですので、注意が必要です。