Posted at

Googlemapにホットペッパー情報を表示する方法

More than 3 years have passed since last update.

まずはリクルートWEBサービス から会員登録してAPIキーを取得。

ほいで、APIリファレンスからURLを取得。

URLはこんなかんじ。

http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=[APIキー]&[エリア等の絞り込み]

実際JSで使うときはうしろに &format=jsonp&callback=?" をつける

ちなみにホットペッパーのクレジット表示が必須なので下記から取得。

クレジット

サンプルは以下。

<div id="gmap"></div>

<a href="http://webservice.recruit.co.jp/"><img src="http://webservice.recruit.co.jp/banner/hotpepper-s.gif" alt="ホットペッパー Webサービス" width="135" height="17" border="0" title="ホットペッパー Webサービス"></a>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/map.js"></script>


// GoogleMapを生成して表示
google.maps.event.addDomListener(window, "load", function(){
var map = document.getElementById("gmap");
var options = {
zoom: 14,
center: new google.maps.LatLng(34.702485, 135.495951)
};
mapObj = new google.maps.Map(map, options);
});

var currentInfoWin = null;

// 店舗情報を取得
function getRamenShop() {
console.log( "getRamenShop()" );

// ホットペッパーAPI
var url ="http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=APIキー&middle_area=Y300,Y305,Y310&genre=G013&format=jsonp&callback=?";
// ホットペッパーAPIを呼び出す
$.getJSON(url, {"url":url}).then(
//成功時の処理
function(data){
disp(data);
},
//失敗時の処理
function(){
alert("Error");
}
);
}

// GoogleMapに表示
function disp(resultJSON) {
// マーカー画像を作成
var markerImg = new google.maps.MarkerImage(
"http://画像ファイルURL.png"
);
// JSONの店舗情報分だけ繰り返し処理
$(resultJSON.results.shop).each(function() {

// 緯度経度情報を取得
var lating = new google.maps.LatLng(this.lat, this.lng);

// マーカーを設定
var markerObj = new google.maps.Marker({
position: lating,
map: mapObj,
icon: markerImg
});

// 情報ウィンドウのHTML作成
var html = "<div class='infoWindow'>"
+ "<div class='infoWindow-logo'>"
+ "<img src='" + this.logo_image + "'>"
+ "</div>"
+ "<div class='infoWindow-txt'>"
+ "<p>" + this.name + "</p>"
+ "<p>" + this.address + "</p>"
+"</div>"

// 情報ウィンドウを作成
var infoWin = new google.maps.InfoWindow({maxWidth:300});
infoWin.setContent(html);

// マーカーをクリックしたら情報ウィンドウを表示
google.maps.event.addListener(markerObj, 'click', function(){
if(currentInfoWin){
currentInfoWin.close();
}
infoWin.open(mapObj, markerObj);
currentInfoWin = infoWin;
});
});

}

window.onload = function() {
getRamenShop();
}