Google Maps JavaScript API v3プレイスライブラリ
- プレイスライブラリについて
- 指定した場所の半径1km以内にあるスポット情報をタイプ別に検索〔場所の周囲検索（location+radius）、タイプ指定あり〕
- 特定の矩形領域にあるスポット情報をタイプ別に検索〔場所の矩形領域内検索（bounds）、タイプ指定あり〕
- 指定した住所の周辺にあるスポット情報をすべて表示〔場所の周囲検索（location+radius）、タイプ指定なし〕
- スポットの詳細情報を表示〔プレイス詳細リクエスト〕
- 場所タイプの種類
プレイスライブラリについて
2013/4/7
参照：Google Maps JavaScript API v3 - プレイス ライブラリ
プレイスライブラリは、指定した範囲にあるレストランやコンビニ、病院などのスポットを検索することができます。 例えば、表参道周辺のスポット情報をすべて取得したり、周辺のカフェ情報など、特定のスポットタイプを指定してスポット情報を検索することができます。
プレイスライブラリを使用するには、Google Maps APIを読み込むときにパラメータを付加します。
http://maps.google.com/maps/api/js?sensor=true&libraries=places
以下は、取得したスポット情報をマップ上にマーカーや情報ウィンドウで表示するサンプルです。
スポットの検索範囲は、指定した位置から半径何メートルまでとするか、検索範囲の矩形領域を指定するかのいずれかを指定できます。 前者の場合はリクエスト時にlocationにgoogle.maps.LatLngオブジェクト, radiusに半径（メートル）を指定し、後者の場合は、boundsにgoogle.maps.LatLngBoundsを指定します。
以下は、「国立新美術館」のプレイス情報に含まれる基本情報です。 reference値を指定すると、さらにその場所のプレイス詳細情報を取得することができます。 詳細では、以下にプラスして、住所、電話番号、営業時間、写真（複数）、クチコミ、ホームページのURLなどが取得できます。 プレイス詳細リクエストのサンプルと項目については、スポットの詳細情報を表示をご覧くださいませ。。
| 項目 | 値 |
|---|---|
| geometry.location | ジオコード 例）03-5777-8600 |
| icon | 場所を表すアイコンのURL 例）http://maps.gstatic.com/mapfiles/place_api/icons/museum-71.png |
| id | 場所ID 例）4b3d70d4d2cb8ad416d0bbabf0c17d03bb456cfe |
| name | 名称 例）国立新美術館 |
| opening_hours.open_now | 今営業中かどうかの有無。営業中ならtrue、そうでないならfalse |
| photos | その場所の写真情報配列（1件のみ）。写真のURL、幅、高さが入っていますので、各オブジェクトに対して写真情報をgetUrl（最大幅px, 最小幅px）で取得します。
$.each(place.photos,function(x,pic){
console.log(pic.getUrl({"maxWidth":200,"maxHeight":100}));
}
|
| raging | 評価。なん段階なのだろう。 例）4.2 |
| reference | プレイス詳細リクエストに使用するreference値。 例）CnRwAAAAUoYt34Texk79Qu_BX9H8wavyeiBeKzv1L-Ot3TjcTlrZoxxGVWBCjhc06lmsamUPxwLafGfscLL3iIQ5XHNHn0J8OCYe1-G9z7NtnxcVKJfS5VA3zkACHTtikpcPXO5aJ4oX1EPTXDPJMrVRLTyLARIQuWkOJGf9wVLUarNL8qFw8hoUqVJVBw6_noXi--4On1R793lbeR8 |
| vicinity | 付近の住所。 例）港区六本木７−２２−２ |
指定した場所の半径1km以内にあるスポット情報をタイプ別に検索
場所の周囲検索（location+radius）、タイプ指定あり
2013/4/7
表参道周辺で、選択した場所タイプに該当するスポットを検索し、ヒットしたスポットの座標にマーカーを立てます。 マーカークリックで情報ウィンドウでそのスポット情報を表示します。
ここでは表参道駅の周囲1kmを検索対象としてみます。 リクエスト時にlocationにgoogle.maps.LatLngオブジェクトで場所の座標を指定し、そこから半径何メートルを検索対象とするかをradiusに整数値で指定します。 500mなら500、1kmなら1000を指定します。
以下のサンプルでは、デフォルトは表参道駅付近（半径1km以内）。【現在地で検索する】ボタンを押すと現在地半径1km以内が検索範囲となります。
var request={
location: new google.maps.LatLng(35.664122,139.729426),
types: [場所タイプ, 場所タイプ, ... ],
radius: "500" /* 指定した座標から半径500m以内 */
};
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - プレイスライブラリ - 場所の周囲検索（location+radius）</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var map, service, point,openFLG=[],overlays=[],iterator=0,current;
var lat=35.664122;
var lng=139.729426;
var openFLG=[],iterator=0;
var picmaxWidth=200; //スポット画像の最大幅
var picmaxHeight=200; //スポット画像の最大高さ
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize("store");
$("#places").bind("change",function(){
fGetPlaceInfo();
});
$("#btn").click(function(e){
/* 現在位置情報を取得 */
navigator.geolocation.watchPosition(function(position) {
point=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
fGetPlaceInfo();
},null,{enableHighAccuracy:false});
});
/* オーバーレイ全削除 */
function resetOverlay(deleteFLG){
if(overlays.length>0){
for(i in overlays){
overlays[i][1].close();
if(deleteFLG==1){
openFLG[i]=0;
overlays[i][0].setMap(null);
}
}
if(deleteFLG==1) overlays.length=0;
if(deleteFLG==1) iterator=0;
}
}
/* 地図初期化 */
function initialize() {
point=new google.maps.LatLng(lat,lng);
map=new google.maps.Map(document.getElementById('map'), {
center: point,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false /* スクロールホイールによる拡大・縮小無効化 */
});
service=new google.maps.places.PlacesService(map);
fGetPlaceInfo();
}
function fGetPlaceInfo(){
map.setCenter(point);
resetOverlay(1);
var request={
location: point,
radius:"1000", /* 指定した座標から半径1000m(1km)以内 */
types: [$("#places").val()]
};
service.search(request, callback);
}
function callback(results, status) {
dbg(results.length);
if (status==google.maps.places.PlacesServiceStatus.OK && results.length>0){
for (var i=0; i<results.length; i++) {
var place=results[i];
createMarker(results[i]);
iterator++;
}
}else{
alert("このエリアでの「"+places_types[$("#places").val()]+"」に関するスポット情報はありません。");
}
}
function createMarker(place) {
var placeLoc=place.geometry.location;
/* マーカー */
var marker=new google.maps.Marker({
map: map,
position: new google.maps.LatLng(placeLoc.lat(), placeLoc.lng())
});
/* 情報ウィンドウ */
var infowindow=new google.maps.InfoWindow({
maxWidth:320
});
/* ID、フラグセット */
marker.set("id",iterator);
infowindow.set("id",iterator);
overlays.push([marker,infowindow]);
/* 情報ウィンドウの×ボタンと押した時 */
google.maps.event.addListener(infowindow,"closeclick",function(){
openFLG[infowindow.get("id")]=0;
});
/* マーカークリックで情報ウィンドウを開閉 */
google.maps.event.addListener(marker, "click", function(){
var id=this.get("id");
if(current>=0 && current!=id){
openFLG[current]=0;
}
resetOverlay(0);
var s ="";
/* アイコン+場所名 */
s+="<div class='ttl cf'>";
s+=(place.icon)?"<img width='32' height='32' src='"+place.icon+"' style='float:left;margin-right:5px;' />":"";
s+=(place.name)?"<b>"+place.name+"</b>":"不明";
s+="</div>";
s+="<div class='detail'>";
/* 住所 */
if(place.vicinity){
s+="<p>"+place.vicinity+"</p>";
}
/* 場所タイプ */
if(place.types){
s+="<p>";
$.each(place.types,function(x,type){
s+=(places_types[type])?places_types[type]+" ":"";
});
s+="</p>";
}
/* 営業中か */
if(place.opening_hours){
s+="<p>只今営業中！</p>";
}
/* 評価 */
if(place.rating){
s+="<p>評価："+place.rating+"</p>";
}
/* 写真 */
if(place.photos && place.photos.length>=1){
s+="<p class='picframe'><img src='"+place.photos[0].getUrl({"maxWidth":picmaxWidth,"maxHeight":picmaxHeight})+"' class='shadow size' /></p>";
}
current=id;
var infowindow=overlays[id][1];
infowindow.setContent("<div class='infowin'>"+s+"</div>");
if(openFLG[id]!=1){
infowindow.open(map, this);
openFLG[id]=1;
}else{
infowindow.close();
openFLG[id]=0;
}
});
}
/* プレイスタイプ */
var places_types={
"accounting":"会計事務所",
"airport":"空港",
"amusement_park":"遊園地",
"aquarium":"水族館",
"art_gallery":"アート ギャラリー",
"atm":"ATM",
"bakery":"ベーカリー、パン屋",
"bank":"銀行",
"bar":"居酒屋",
"beauty_salon":"ビューティー サロン",
"bicycle_store":"自転車店",
"book_store":"書店",
"bowling_alley":"ボウリング場",
"bus_station":"バスターミナル",
"cafe":"カフェ",
"campground":"キャンプ場",
"car_dealer":"カー ディーラー",
"car_rental":"レンタカー",
"car_repair":"車の修理",
"car_wash":"洗車場",
"casino":"カジノ",
"cemetery":"墓地",
"church":"教会",
"city_hall":"市役所",
"clothing_store":"衣料品店",
"convenience_store":"コンビニエンス ストア",
"courthouse":"裁判所",
"dentist":"歯科医",
"department_store":"百貨店",
"doctor":"医者",
"electrician":"電気工",
"electronics_store":"電器店",
"embassy":"大使館",
"establishment":"施設",
"finance":"金融業",
"fire_station":"消防署",
"florist":"花屋",
"food":"食料品店",
"funeral_home":"葬儀場",
"furniture_store":"家具店",
"gas_station":"ガソリンスタンド",
"general_contractor":"建設会社",
"geocode":"ジオコード",
"grocery_or_supermarket":"スーパー",
"gym":"スポーツクラブ",
"hair_care":"ヘアケア",
"hardware_store":"金物店",
"health":"健康",
"hindu_temple":"ヒンドゥー寺院",
"home_goods_store":"インテリア ショップ",
"hospital":"病院",
"insurance_agency":"保険代理店",
"jewelry_store":"宝飾店",
"laundry":"クリーニング店",
"lawyer":"弁護士",
"library":"図書館",
"liquor_store":"酒店",
"local_government_office":"役場",
"locksmith":"錠屋",
"lodging":"宿泊施設",
"meal_delivery":"出前",
"meal_takeaway":"テイクアウト",
"mosque":"モスク",
"movie_rental":"DVD レンタル",
"movie_theater":"映画館",
"moving_company":"引越会社",
"museum":"美術館/博物館",
"night_club":"ナイト クラブ",
"painter":"塗装業",
"park":"公園",
"parking":"駐車場",
"pet_store":"ペット ショップ",
"pharmacy":"薬局",
"physiotherapist":"理学療法士",
"place_of_worship":"礼拝所",
"plumber":"配管工",
"police":"警察",
"post_office":"郵便局",
"real_estate_agency":"不動産業",
"restaurant":"レストラン",
"roofing_contractor":"防水工事業",
"rv_park":"オート キャンプ場",
"school":"学校",
"shoe_store":"靴屋",
"shopping_mall":"ショッピング モール",
"spa":"温泉、スパ",
"stadium":"スタジアム",
"storage":"倉庫",
"store":"小売店",
"subway_station":"地下鉄駅",
"synagogue":"シナゴーグ",
"taxi_stand":"タクシー乗り場",
"train_station":"駅",
"travel_agency":"旅行代理店",
"university":"大学",
"veterinary_care":"獣医",
"zoo":"動物園",
"administrative_area_level_1":"行政区画レベル 1",
"administrative_area_level_2":"行政区画レベル 2",
"administrative_area_level_3":"行政区画レベル 3",
"colloquial_area":"非公式地域",
"country":"国",
"floor":"階",
"intersection":"交差点",
"locality":"地区",
"natural_feature":"地勢",
"neighborhood":"周辺地域",
"political":"政治",
"point_of_interest":"スポット",
"post_box":"ポスト",
"postal_code":"郵便番号",
"postal_code_prefix":"郵便番号のプレフィックス",
"postal_town":"郵便番号に対応する都市",
"premise":"建物名",
"room":"部屋",
"route":"ルート",
"street_address":"住所",
"street_number":"番地",
"sublocality":"下位地区",
"sublocality_level_4":"下位地区レベル 4",
"sublocality_level_5":"下位地区レベル 5",
"sublocality_level_3":"下位地区レベル 3",
"sublocality_level_2":"下位地区レベル 2",
"sublocality_level_1":"下位地区レベル 1",
"subpremise":"区画",
"transit_station":"駅、停留所"
};
function dbg(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
});
</script>
</head>
<body>
<h1>設置サンプル - GMAPv3 - プレイスライブラリ</h1>
<h2>場所の周囲検索（location+radius）</h2>
<p>表参道駅付近（半径1km以内）のレストラン、カフェ、飲食店などのスポット情報を表示します。【現在地で検索する】ボタンを押すと現在地半径1km以内が検索範囲となります。</p>
<p><a href="#" class="button" id="btn">現在地で検索する</a></p>
<p>
<label for="places">場所：</label>
<select id="places">
<optgroup label="学ぶ">
<option value="university">大学</option>
<option value="school">学校</option>
</optgroup>
<optgroup label="食べる">
<option value="restaurant">レストラン</option>
<option value="food">飲食店</option>
<option value="cafe" selected>カフェ</option>
<option value="bakery">パン屋</option>
<option value="bar">バー</option>
<option value="grocery_or_supermarket">食料品店やスーパーマーケット</option>
<option value="liquor_store">酒屋</option>
<option value="convenience_store">コンビニ</option>
</optgroup>
<optgroup label="買いもの">
<option value="store">お店</option>
<option value="jewelry_store">ジュエリーショップ</option>
<option value="shoe_store">靴屋</option>
<option value="clothing_store">洋服屋</option>
</optgroup>
<optgroup label="アート">
<option value="art_gallery">アートギャラリー</option>
<option value="museum">美術館</option>
</optgroup>
<optgroup label="ビューティー・ヘルス">
<option value="health">健康</option>
<option value="hair_care">ヘアケア</option>
<option value="beauty_salon">美容院</option>
</optgroup>
<optgroup label="病院">
<option value="doctor">お医者さん</option>
<option value="dentist">歯医者</option>
<option value="pharmacy">薬局</option>
</optgroup>
<optgroup label="生活">
<option value="lawyer">法律関係の事務所</option>
<option value="finance">ファイナンス（会計事務所とか）</option>
<option value="embassy">大使館</option>
<option value="laundry">クリーニング屋</option>
<option value="florist">花屋</option>
<option value="furniture_store">家具屋</option>
<option value="home_goods_store">日用品店</option>
<option value="lodging">施設</option>
<option value="place_of_worship">寺院・礼拝堂</option>
<option value="bank">銀行</option>
<option value="post_office">郵便局</option>
<option value="real_estate_agency">不動産屋</option>
<option value="travel_agency">旅行代理店</option>
</optgroup>
<optgroup label="交通">
<option value="parking">駐車場</option>
<option value="train_station">駅</option>
</optgroup>
</select>
</p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
特定の矩形領域にあるスポット情報をタイプ別に検索
場所の矩形領域内検索（bounds）、タイプ指定あり
2013/4/7
上記とは異なり、検索範囲を矩形領域で指定した例です。
六本木周辺で、選択した場所タイプに該当するスポットを検索し、ヒットしたスポットの座標にマーカーを立てます。 マーカークリックで情報ウィンドウでそのスポット情報を表示します。
ここでは六本木の矩形領域を検索対象としてみます。 リクエスト時にboundsに六本木の境界をgoogle.maps.LatLngBoundsにgoogle.maps.LatLngオブジェクトで指定します。
※矩形領域の境界（viewport）情報はジオコード検索から住所や名称で検索すると取得できます。
以下のサンプルでは、デフォルはト六本木の矩形領域。【現在地で検索する】ボタンを押すと現在地を中心とした矩形領域が検索範囲となります。
var request={
bounds: map.getBounds(),
types: [場所タイプ, 場所タイプ, ... ]
};
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - プレイスライブラリ - 場所の矩形領域内検索（bounds）</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var map, service, point,openFLG=[],overlays=[],iterator=0,bounds,current;
var lat=35.664122;
var lng=139.729426;
var picmaxWidth=200; /* スポット画像の最大幅 */
var picmaxHeight=200; /* スポット画像の最大高さ */
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize("store");
$("#places").bind("change",function(){
fGetPlaceInfo();
});
$("#btn").click(function(e){
/* 現在位置情報を取得 */
navigator.geolocation.watchPosition(function(position) {
point=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
fGetPlaceInfo();
},null,{enableHighAccuracy:false});
});
/* オーバーレイ全削除 */
function resetOverlay(deleteFLG){
if(overlays.length>0){
for(i in overlays){
overlays[i][1].close();
if(deleteFLG==1){
openFLG[i]=0;
overlays[i][0].setMap(null);
}
}
if(deleteFLG==1) overlays.length=0;
if(deleteFLG==1) iterator=0;
}
}
/* 地図初期化 */
function initialize() {
point=new google.maps.LatLng(lat,lng);
map=new google.maps.Map(document.getElementById('map'), {
center: point,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false /* スクロールホイールによる拡大・縮小無効化 */
});
google.maps.event.addListenerOnce(map,"idle", function(){
dbg(this.getBounds());
bounds=this.getBounds();
fGetPlaceInfo();
});
service=new google.maps.places.PlacesService(map);
}
function fGetPlaceInfo(){
map.setCenter(point);
resetOverlay(1);
dbg(map.getBounds());
bounds=map.getBounds();
/* 範囲指定 */
var request={
bounds:bounds,
types: [$("#places").val()]
};
service.search(request, callback);
}
function callback(results, status) {
dbg(results.length);
if (status==google.maps.places.PlacesServiceStatus.OK && results.length>0){
for (var i=0; i<results.length; i++) {
var place=results[i];
createMarker(results[i]);
iterator++;
}
}else{
alert("このエリアでの「"+places_types[$("#places").val()]+"」に関するスポット情報はありません。");
}
}
function createMarker(place) {
var placeLoc=place.geometry.location;
/* マーカー */
var marker=new google.maps.Marker({
map: map,
position: new google.maps.LatLng(placeLoc.lat(), placeLoc.lng())
});
/* 情報ウィンドウ */
var infowindow=new google.maps.InfoWindow({
maxWidth:320
});
/* ID、フラグセット */
marker.set("id",iterator);
infowindow.set("id",iterator);
overlays.push([marker,infowindow]);
/* 情報ウィンドウの×ボタンと押した時 */
google.maps.event.addListener(infowindow,"closeclick",function(){
openFLG[infowindow.get("id")]=0;
});
/* マーカークリックで情報ウィンドウを開閉 */
google.maps.event.addListener(marker, "click", function(){
var id=this.get("id");
if(current>=0 && current!=id){
openFLG[current]=0;
}
resetOverlay(0);
var s ="";
/* アイコン+場所名 */
s+="<div class='ttl cf'>";
s+=(place.icon)?"<img width='32' height='32' src='"+place.icon+"' style='float:left;margin-right:5px;' />":"";
s+=(place.name)?"<b>"+place.name+"</b>":"不明";
s+="</div>";
s+="<div class='detail'>";
/* 住所 */
if(place.vicinity){
s+="<p>"+place.vicinity+"</p>";
}
/* 場所タイプ */
if(place.types){
s+="<p>";
$.each(place.types,function(x,type){
s+=(places_types[type])?places_types[type]+" ":"";
});
s+="</p>";
}
/* 営業中か */
if(place.opening_hours){
s+="<p>只今営業中！</p>";
}
/* 評価 */
if(place.rating){
s+="<p>評価："+place.rating+"</p>";
}
/* 写真 */
if(place.photos && place.photos.length>=1){
s+="<p class='picframe'><img src='"+place.photos[0].getUrl({"maxWidth":picmaxWidth,"maxHeight":picmaxHeight})+"' class='shadow size' /></p>";
}
current=id;
var infowindow=overlays[id][1];
infowindow.setContent("<div class='infowin'>"+s+"</div>");
if(openFLG[id]!=1){
infowindow.open(map, this);
openFLG[id]=1;
}else{
infowindow.close();
openFLG[id]=0;
}
});
}
/* プレイスタイプ */
var places_types={
"accounting":"会計事務所",
"airport":"空港",
"amusement_park":"遊園地",
"aquarium":"水族館",
"art_gallery":"アート ギャラリー",
"atm":"ATM",
"bakery":"ベーカリー、パン屋",
"bank":"銀行",
"bar":"居酒屋",
"beauty_salon":"ビューティー サロン",
"bicycle_store":"自転車店",
"book_store":"書店",
"bowling_alley":"ボウリング場",
"bus_station":"バスターミナル",
"cafe":"カフェ",
"campground":"キャンプ場",
"car_dealer":"カー ディーラー",
"car_rental":"レンタカー",
"car_repair":"車の修理",
"car_wash":"洗車場",
"casino":"カジノ",
"cemetery":"墓地",
"church":"教会",
"city_hall":"市役所",
"clothing_store":"衣料品店",
"convenience_store":"コンビニエンス ストア",
"courthouse":"裁判所",
"dentist":"歯科医",
"department_store":"百貨店",
"doctor":"医者",
"electrician":"電気工",
"electronics_store":"電器店",
"embassy":"大使館",
"establishment":"施設",
"finance":"金融業",
"fire_station":"消防署",
"florist":"花屋",
"food":"食料品店",
"funeral_home":"葬儀場",
"furniture_store":"家具店",
"gas_station":"ガソリンスタンド",
"general_contractor":"建設会社",
"geocode":"ジオコード",
"grocery_or_supermarket":"スーパー",
"gym":"スポーツクラブ",
"hair_care":"ヘアケア",
"hardware_store":"金物店",
"health":"健康",
"hindu_temple":"ヒンドゥー寺院",
"home_goods_store":"インテリア ショップ",
"hospital":"病院",
"insurance_agency":"保険代理店",
"jewelry_store":"宝飾店",
"laundry":"クリーニング店",
"lawyer":"弁護士",
"library":"図書館",
"liquor_store":"酒店",
"local_government_office":"役場",
"locksmith":"錠屋",
"lodging":"宿泊施設",
"meal_delivery":"出前",
"meal_takeaway":"テイクアウト",
"mosque":"モスク",
"movie_rental":"DVD レンタル",
"movie_theater":"映画館",
"moving_company":"引越会社",
"museum":"美術館/博物館",
"night_club":"ナイト クラブ",
"painter":"塗装業",
"park":"公園",
"parking":"駐車場",
"pet_store":"ペット ショップ",
"pharmacy":"薬局",
"physiotherapist":"理学療法士",
"place_of_worship":"礼拝所",
"plumber":"配管工",
"police":"警察",
"post_office":"郵便局",
"real_estate_agency":"不動産業",
"restaurant":"レストラン",
"roofing_contractor":"防水工事業",
"rv_park":"オート キャンプ場",
"school":"学校",
"shoe_store":"靴屋",
"shopping_mall":"ショッピング モール",
"spa":"温泉、スパ",
"stadium":"スタジアム",
"storage":"倉庫",
"store":"小売店",
"subway_station":"地下鉄駅",
"synagogue":"シナゴーグ",
"taxi_stand":"タクシー乗り場",
"train_station":"駅",
"travel_agency":"旅行代理店",
"university":"大学",
"veterinary_care":"獣医",
"zoo":"動物園",
"administrative_area_level_1":"行政区画レベル 1",
"administrative_area_level_2":"行政区画レベル 2",
"administrative_area_level_3":"行政区画レベル 3",
"colloquial_area":"非公式地域",
"country":"国",
"floor":"階",
"intersection":"交差点",
"locality":"地区",
"natural_feature":"地勢",
"neighborhood":"周辺地域",
"political":"政治",
"point_of_interest":"スポット",
"post_box":"ポスト",
"postal_code":"郵便番号",
"postal_code_prefix":"郵便番号のプレフィックス",
"postal_town":"郵便番号に対応する都市",
"premise":"建物名",
"room":"部屋",
"route":"ルート",
"street_address":"住所",
"street_number":"番地",
"sublocality":"下位地区",
"sublocality_level_4":"下位地区レベル 4",
"sublocality_level_5":"下位地区レベル 5",
"sublocality_level_3":"下位地区レベル 3",
"sublocality_level_2":"下位地区レベル 2",
"sublocality_level_1":"下位地区レベル 1",
"subpremise":"区画",
"transit_station":"駅、停留所"
};
function dbg(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
});
</script>
</head>
<body>
<h1>設置サンプル - GMAPv3 - プレイスライブラリ</h1>
<h2>場所の矩形領域内検索（bounds）</h2>
<p>「六本木」の矩形領域内にあるレストラン、カフェ、飲食店などのスポット情報を表示します。【現在地で検索する】ボタンを押すと現在地を中心とした矩形領域が検索範囲となります。</p>
<p><a href="#" class="button" id="btn">現在地で検索する</a></p>
<p>
<label for="places">場所：</label>
<select id="places">
<optgroup label="学ぶ">
<option value="university">大学</option>
<option value="school">学校</option>
</optgroup>
<optgroup label="食べる">
<option value="restaurant">レストラン</option>
<option value="food">飲食店</option>
<option value="cafe" selected>カフェ</option>
<option value="bakery">パン屋</option>
<option value="bar">バー</option>
<option value="grocery_or_supermarket">食料品店やスーパーマーケット</option>
<option value="liquor_store">酒屋</option>
<option value="convenience_store">コンビニ</option>
</optgroup>
<optgroup label="買いもの">
<option value="store">お店</option>
<option value="jewelry_store">ジュエリーショップ</option>
<option value="shoe_store">靴屋</option>
<option value="clothing_store">洋服屋</option>
</optgroup>
<optgroup label="アート">
<option value="art_gallery">アートギャラリー</option>
<option value="museum">美術館</option>
</optgroup>
<optgroup label="ビューティー・ヘルス">
<option value="health">健康</option>
<option value="hair_care">ヘアケア</option>
<option value="beauty_salon">美容院</option>
</optgroup>
<optgroup label="病院">
<option value="doctor">お医者さん</option>
<option value="dentist">歯医者</option>
<option value="pharmacy">薬局</option>
</optgroup>
<optgroup label="生活">
<option value="lawyer">法律関係の事務所</option>
<option value="finance">ファイナンス（会計事務所とか）</option>
<option value="embassy">大使館</option>
<option value="laundry">クリーニング屋</option>
<option value="florist">花屋</option>
<option value="furniture_store">家具屋</option>
<option value="home_goods_store">日用品店</option>
<option value="lodging">施設</option>
<option value="place_of_worship">寺院・礼拝堂</option>
<option value="bank">銀行</option>
<option value="post_office">郵便局</option>
<option value="real_estate_agency">不動産屋</option>
<option value="travel_agency">旅行代理店</option>
</optgroup>
<optgroup label="交通">
<option value="parking">駐車場</option>
<option value="train_station">駅</option>
</optgroup>
</select>
</p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
指定した住所の周辺にあるスポット情報をすべて表示
場所の周囲検索（location+radius）、タイプ指定なし
2013/4/7
上記とは異なり、リクエスト時にtypeを省略し、すべての場所タイプを検索範囲とした例です。
以下のサンプルでは、六本木周辺（半径5km以内）のレストラン、カフェ、飲食店などプレイスに登録されているすべてのスポット情報を表示します。【現在地で検索する】ボタンを押すと現在地半径1km以内が検索範囲となります。
var request={
location: new google.maps.LatLng(35.664122,139.729426),
radius: "500" /* 指定した座標から半径500m以内 */
};
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - プレイスライブラリ - 全ての場所タイプ</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- jQuery -->
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var map, service, point,openFLG=[],overlays=[],iterator=0,current;
var lat=35.664122;
var lng=139.729426;
var openFLG=[],iterator=0;
var picmaxWidth=200; /* スポット画像の最大幅 */
var picmaxHeight=200; /* スポット画像の最大高さ */
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize("store");
$("#places").bind("change",function(){
fGetPlaceInfo();
});
$("#btn").click(function(e){
/* 現在位置情報を取得 */
navigator.geolocation.watchPosition(function(position) {
point=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
fGetPlaceInfo();
},null,{enableHighAccuracy:false});
});
/* オーバーレイ全削除 */
function resetOverlay(deleteFLG){
if(overlays.length>0){
for(i in overlays){
overlays[i][1].close();
if(deleteFLG==1){
openFLG[i]=0;
overlays[i][0].setMap(null);
}
}
if(deleteFLG==1) overlays.length=0;
if(deleteFLG==1) iterator=0;
}
}
/* 地図初期化 */
function initialize() {
point=new google.maps.LatLng(lat,lng);
map=new google.maps.Map(document.getElementById('map'), {
center: point,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false /* スクロールホイールによる拡大・縮小無効化 */
});
service=new google.maps.places.PlacesService(map);
fGetPlaceInfo();
}
function fGetPlaceInfo(){
map.setCenter(point);
resetOverlay(1);
var request={
location: point,
radius:"500" /* 指定した座標から半径500m以内 */
};
service.search(request, callback);
}
function callback(results, status) {
dbg(results.length);
if (status==google.maps.places.PlacesServiceStatus.OK && results.length>0){
for (var i=0; i<results.length; i++) {
var place=results[i];
createMarker(results[i]);
iterator++;
}
}else{
alert("スポット情報が見つかりませんでした。");
}
}
function createMarker(place) {
var placeLoc=place.geometry.location;
/* マーカー */
var marker=new google.maps.Marker({
map: map,
position: new google.maps.LatLng(placeLoc.lat(), placeLoc.lng())
});
/* 情報ウィンドウ */
var infowindow=new google.maps.InfoWindow({
maxWidth:320
});
/* ID、フラグセット */
marker.set("id",iterator);
infowindow.set("id",iterator);
overlays.push([marker,infowindow]);
/* 情報ウィンドウの×ボタンと押した時 */
google.maps.event.addListener(infowindow,"closeclick",function(){
openFLG[infowindow.get("id")]=0;
});
/* マーカークリックで情報ウィンドウを開閉 */
google.maps.event.addListener(marker, "click", function(){
var id=this.get("id");
if(current>=0 && current!=id){
openFLG[current]=0;
}
resetOverlay(0);
var s ="";
/* アイコン+場所名 */
s+="<div class='ttl cf'>";
s+=(place.icon)?"<img width='32' height='32' src='"+place.icon+"' style='float:left;margin-right:5px;' />":"";
s+=(place.name)?"<b>"+place.name+"</b>":"不明";
s+="</div>";
s+="<div class='detail'>";
/* 住所 */
if(place.vicinity){
s+="<p>"+place.vicinity+"</p>";
}
/* 場所タイプ */
if(place.types){
s+="<p>";
$.each(place.types,function(x,type){
s+=(places_types[type])?places_types[type]+" ":"";
});
s+="</p>";
}
/* 今営業中か */
if(place.opening_hours){
s+="<p>只今営業中！</p>";
}
/* 評価 */
if(place.rating){
s+="<p>評価："+place.rating+"</p>";
}
/* 写真 */
if(place.photos && place.photos.length>=1){
s+="<p class='picframe'><img src='"+place.photos[0].getUrl({"maxWidth":picmaxWidth,"maxHeight":picmaxHeight})+"' class='shadow size' /></p>";
}
current=id;
var infowindow=overlays[id][1];
infowindow.setContent("<div class='infowin'>"+s+"</div>");
if(openFLG[id]!=1){
infowindow.open(map, this);
openFLG[id]=1;
}else{
infowindow.close();
openFLG[id]=0;
}
});
}
/* プレイスタイプ */
var places_types={
"accounting":"会計事務所",
"airport":"空港",
"amusement_park":"遊園地",
"aquarium":"水族館",
"art_gallery":"アート ギャラリー",
"atm":"ATM",
"bakery":"ベーカリー、パン屋",
"bank":"銀行",
"bar":"居酒屋",
"beauty_salon":"ビューティー サロン",
"bicycle_store":"自転車店",
"book_store":"書店",
"bowling_alley":"ボウリング場",
"bus_station":"バスターミナル",
"cafe":"カフェ",
"campground":"キャンプ場",
"car_dealer":"カー ディーラー",
"car_rental":"レンタカー",
"car_repair":"車の修理",
"car_wash":"洗車場",
"casino":"カジノ",
"cemetery":"墓地",
"church":"教会",
"city_hall":"市役所",
"clothing_store":"衣料品店",
"convenience_store":"コンビニエンス ストア",
"courthouse":"裁判所",
"dentist":"歯科医",
"department_store":"百貨店",
"doctor":"医者",
"electrician":"電気工",
"electronics_store":"電器店",
"embassy":"大使館",
"establishment":"施設",
"finance":"金融業",
"fire_station":"消防署",
"florist":"花屋",
"food":"食料品店",
"funeral_home":"葬儀場",
"furniture_store":"家具店",
"gas_station":"ガソリンスタンド",
"general_contractor":"建設会社",
"geocode":"ジオコード",
"grocery_or_supermarket":"スーパー",
"gym":"スポーツクラブ",
"hair_care":"ヘアケア",
"hardware_store":"金物店",
"health":"健康",
"hindu_temple":"ヒンドゥー寺院",
"home_goods_store":"インテリア ショップ",
"hospital":"病院",
"insurance_agency":"保険代理店",
"jewelry_store":"宝飾店",
"laundry":"クリーニング店",
"lawyer":"弁護士",
"library":"図書館",
"liquor_store":"酒店",
"local_government_office":"役場",
"locksmith":"錠屋",
"lodging":"宿泊施設",
"meal_delivery":"出前",
"meal_takeaway":"テイクアウト",
"mosque":"モスク",
"movie_rental":"DVD レンタル",
"movie_theater":"映画館",
"moving_company":"引越会社",
"museum":"美術館/博物館",
"night_club":"ナイト クラブ",
"painter":"塗装業",
"park":"公園",
"parking":"駐車場",
"pet_store":"ペット ショップ",
"pharmacy":"薬局",
"physiotherapist":"理学療法士",
"place_of_worship":"礼拝所",
"plumber":"配管工",
"police":"警察",
"post_office":"郵便局",
"real_estate_agency":"不動産業",
"restaurant":"レストラン",
"roofing_contractor":"防水工事業",
"rv_park":"オート キャンプ場",
"school":"学校",
"shoe_store":"靴屋",
"shopping_mall":"ショッピング モール",
"spa":"温泉、スパ",
"stadium":"スタジアム",
"storage":"倉庫",
"store":"小売店",
"subway_station":"地下鉄駅",
"synagogue":"シナゴーグ",
"taxi_stand":"タクシー乗り場",
"train_station":"駅",
"travel_agency":"旅行代理店",
"university":"大学",
"veterinary_care":"獣医",
"zoo":"動物園",
"administrative_area_level_1":"行政区画レベル 1",
"administrative_area_level_2":"行政区画レベル 2",
"administrative_area_level_3":"行政区画レベル 3",
"colloquial_area":"非公式地域",
"country":"国",
"floor":"階",
"intersection":"交差点",
"locality":"地区",
"natural_feature":"地勢",
"neighborhood":"周辺地域",
"political":"政治",
"point_of_interest":"スポット",
"post_box":"ポスト",
"postal_code":"郵便番号",
"postal_code_prefix":"郵便番号のプレフィックス",
"postal_town":"郵便番号に対応する都市",
"premise":"建物名",
"room":"部屋",
"route":"ルート",
"street_address":"住所",
"street_number":"番地",
"sublocality":"下位地区",
"sublocality_level_4":"下位地区レベル 4",
"sublocality_level_5":"下位地区レベル 5",
"sublocality_level_3":"下位地区レベル 3",
"sublocality_level_2":"下位地区レベル 2",
"sublocality_level_1":"下位地区レベル 1",
"subpremise":"区画",
"transit_station":"駅、停留所"
};
function dbg(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
});
</script>
</head>
<body>
<h1>設置サンプル - GMAPv3 - プレイスライブラリ - 全ての場所タイプ</h2>
<p>六本木周辺半径500m以内のレストラン、カフェ、飲食店などプレイスに登録されているすべてのスポット情報を表示します。【現在地で検索する】ボタンを押すと現在地半径1km以内が検索範囲となります。</p>
<p><a href="#" class="button" id="btn">現在地で検索する</a></p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
スポットの詳細情報を表示
プレイス詳細リクエスト
2013/4/7
プレイス検索では、スポットの名称・住所・写真・今営業しているかなど基本情報しか受け取れませんが、reference値で検索するとさらにそのスポットの詳細情報を検索することができます。 電話番号やクチコミ、営業時間など 以下は、「国立新美術館」のプレイス詳細に含まれる情報です。
| 項目 | 値 |
|---|---|
| address_components | 住所情報の配列 例） |
| formatted_address | 住所 例）日本, 東京都港区六本木７−２２−２ |
| formatted_phone_number | 電話番号 例）03-5777-8600 |
| geometry.location | ジオコード 例）03-5777-8600 |
| icon | 場所を表すアイコンのURL 例）http://maps.gstatic.com/mapfiles/place_api/icons/museum-71.png |
| id | 場所ID 例）4b3d70d4d2cb8ad416d0bbabf0c17d03bb456cfe |
| international_phone_number | 国際番号 例）+81 3-5777-8600 |
| name | 名称 例）国立新美術館 |
| opening_hours.open_now | 今営業中かどうかの有無。営業中ならtrue、そうでないならfalse |
| opening_hours.periods | 1週間分の営業時間。openが営業開始時間、closeが営業終了時間情報。ただこれがやっかいで、0-6の順番に出せばよいというわけにはいきません。ちょっと厄介なので下記で説明します。 |
| photos | その場所の写真情報配列。写真のURL、幅、高さが入っていますので、各オブジェクトに対して写真情報をgetUrl（最大幅px, 最小幅px）で取得します。
$.each(place.photos,function(x,pic){
console.log(pic.getUrl({"maxWidth":200,"maxHeight":100}));
}
|
| raging | 評価。なん段階なのだろう。 例）4.2 |
| reference | プレイス詳細リクエストに使用するreference値。 例）CnRwAAAAUoYt34Texk79Qu_BX9H8wavyeiBeKzv1L-Ot3TjcTlrZoxxGVWBCjhc06lmsamUPxwLafGfscLL3iIQ5XHNHn0J8OCYe1-G9z7NtnxcVKJfS5VA3zkACHTtikpcPXO5aJ4oX1EPTXDPJMrVRLTyLARIQuWkOJGf9wVLUarNL8qFw8hoUqVJVBw6_noXi--4On1R793lbeR8 |
| reviews | Google+に投稿されたその場所のクチコミレビュー配列。author_nameに投稿者名、author_urlに投稿者のGoogle+のURL、textにレビュー内容、timeに投稿日。1000をかけて変換してやる必要があります。 例）358095377 var EpochSec=358095377; var d=new Date(); d.setTime(EpochSec*1000); var year=d.getFullYear(); var month=d.getMonth()+1; var day=d.getDate(); console.log(year+"/"+month+"/"+day); |
| types | この場所に紐づいた場所タイプ配列。 例）"museum","establishment" |
| tz | タイムゾーン。 例）GMT+0900 |
| url | この場所のGoogle+ページURL。 例）https://plus.google.com/114447876233362297911/about?hl=ja |
| utc_offset | UTCオフセット。 例）540 |
| vicinity | 付近の住所。住所と同じ？ 例）港区六本木７−２２−２ |
| website: | ホームページのURL 例）http://www.nact.jp/ |
営業時間を出力する際の注意点
営業開始時間と営業終了時間のセットが1オブジェクトとして入っていますが、病院、飲食店など、1日の間で10-12,14-17など複数の営業時間がある場合もそれぞれ1オブジェクトに入るため1オブジェクト1日分とは限りません。 そのため、nextDateに入っている日付を見て判定する必要があります。
またドンキホーテなど24時間営業の場合のデータの入りも特殊です。 24時間営業の場合は、open情報のtimeに"0000"、close情報が入っていないオブジェクトが1件返るようなのでこれで判定してます。
/* 営業情報を格納用 */ if(place.opening_hours){ $.each(place.opening_hours.periods,function(x,openclose){ /* 営業開始時間 */ var open=(openclose.open && openclose.open.time)?openclose.open.time:""; /* 営業終了時間 */ var close=(openclose.close && openclose.close.time)?openclose.close.time:""; if(!tmp[fChgWeek(openclose.open.nextDate)]){ tmp[fChgWeek(openclose.open.nextDate)]=new Array(); } tmp[fChgWeek(openclose.open.nextDate)].push([open,close]); }); var tmpmax=aryCount(tmp); s+="<table>"; for(var i in tmp){ if(i==0){ /* いま営業中か */ s+="<tr"+(((i)==fGetWeek())?" class='cur'":"")+"><th rowspan='"+tmpmax+"'>営業時間<span>"+((place.opening_hours.open_now)?"営業中！":"営業時間外")+"</span></th>"; }else{ s+="<tr"+(((i)==fGetWeek())?" class='cur'":"")+">"; } s+="<td>"+week[i]+"曜日 "; /* 営業時間HTML出力 */ if(tmp[i]){ for(var j in tmp[i]){ if(tmp[i][j]){ /* 24時間営業か */ if(tmp[i][j][0]=="0000" && !tmp[i][j][1]){ s+="24時間営業"; }else{ if(tmp[i][j][0]){ /* 営業開始時間 */ s+=tmp[i][j][0].substring(0,2)+"時"+tmp[i][j][0].substring(2,4)+"分"; } if(tmp[i][j][1]){ /* 営業終了時間 */ if(tmp[i][j][0]) s+="～"; s+=tmp[i][j][1].substring(0,2)+"時"+tmp[i][j][1].substring(2,4)+"分 "; } } } } } s+="</td></tr>"; } s+="</table>"; } /* 曜日の配列（日曜日は"0"） */ var week={ "0":"日", "1":"月", "2":"火", "3":"水", "4":"木", "5":"金", "6":"土" }; /* 曜日取得 */ function fGetWeek(){ var d=new Date(); return d.getDay(); }
設置サンプル
以下のサンプルでは、まずプレイス検索で周辺スポットにマーカーを立て、マーカーをクリックした時に、そのスポットのreference値でプレイス詳細情報リクエストを行い、情報ウィンドウにそのスポットの詳細情報を表示します。
設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - プレイスライブラリ - プレイス詳細</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<!--meta name="viewport" content="initial-scale=1.0, user-scalable=no" /-->
<!-- jQuery -->
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var map, service, point,openFLG=[],overlays=[],iterator=0,current;
var lat=35.664122;
var lng=139.729426;
var openFLG=[],iterator=0;
var picmaxWidth=250; //スポット画像の最大幅
var picmaxHeight=200; //スポット画像の最大高さ
/* ページ読み込み時に地図を初期化 */
$(function(){
initialize("store");
$("#places").bind("change",function(){
fGetPlaceInfo();
});
$("#btn").click(function(e){
// 現在位置情報を取得
navigator.geolocation.watchPosition(function(position) {
point=new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
fGetPlaceInfo();
}, null,{enableHighAccuracy:false});
});
//オーバーレイ全削除
function resetOverlay(deleteFLG){
if(overlays.length>0){
for(i in overlays){
overlays[i][1].close();
if(deleteFLG==1){
openFLG[i]=0;
overlays[i][0].setMap(null);
}
}
if(deleteFLG==1) overlays.length=0;
if(deleteFLG==1) iterator=0;
}
}
function initialize() {
point=new google.maps.LatLng(lat,lng);
map=new google.maps.Map(document.getElementById('map'), {
center: point,
zoom:16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false /* スクロールホイールによる拡大・縮小無効化 */
});
service=new google.maps.places.PlacesService(map);
fGetPlaceInfo();
}
function fGetPlaceInfo(){
map.setCenter(point);
resetOverlay(1);
var request={
location: point,
radius:"500" /* 指定した座標から半径50m以内 */
};
service.search(request, callback);
}
function callback(results, status) {
dbg(results.length);
if (status==google.maps.places.PlacesServiceStatus.OK && results.length>0){
for (var i=0; i<results.length; i++) {
var place=results[i];
createMarker(results[i]);
iterator++;
}
}else{
alert("スポット情報が見つかりませんでした。");
}
}
function createMarker(place) {
var placeLoc=place.geometry.location;
//マーカー
var marker=new google.maps.Marker({
map: map,
position: new google.maps.LatLng(placeLoc.lat(), placeLoc.lng())
});
//情報ウィンドウ
var infowindow=new google.maps.InfoWindow({
maxWidth:320,
maxHeight:1000
});
//ID、フラグセット
marker.set("id",iterator);
infowindow.set("id",iterator);
overlays.push([marker,infowindow]);
//情報ウィンドウの×ボタンと押した時
google.maps.event.addListener(infowindow,"closeclick",function(){
openFLG[infowindow.get("id")]=0;
});
//マーカークリックで情報ウィンドウを開閉
google.maps.event.addListener(marker, "click", function(){
dbg(place);
var id=this.get("id");
if(current>=0 && current!=id){
openFLG[current]=0;
}
resetOverlay(0);
var s ="";
current=id;
var infowindow=overlays[id][1];
if(openFLG[id]!=1){
openFLG[id]=1;
var request = {
reference:place.reference
};
service.getDetails(request, function(place, status){
if(!place) return;
dbg(place);
var s="";
s+="<div class='ttl cf'>";
//アイコン+場所名
s+=(place.icon)?"<img width='32' height='32' src='"+place.icon+"' style='float:left;margin-right:5px;' />":"";
s+=(place.name)?"<b>"+place.name+"</b>":"不明";
s+="</div>";
s+="<div class='detail'>";
s+=(place.formatted_address)?"<p><b>"+place.formatted_address+"</b>":"";
/* 電話+サイト */
if(place.formatted_phone_number||place.website){
s+="<p>";
s+=(place.formatted_phone_number)?"TEL："+place.formatted_phone_number+" ":"";
s+=(place.website)?"URL：<a href='"+place.website+"' title='"+place.website+"' target='_blank'>"+fGetDomain(place.website)+"</a>":"";
s+="</p>";
}
/* 場所タイプ */
if(place.types){
s+="<p>";
$.each(place.types,function(x,type){
s+=(places_types[type])?places_types[type]+" ":"";
});
s+="</p>";
}
/* Google+ページのURL */
s+=(place.url)? "<p><a href='"+place.url+"' class='button w100p' target='_blank' title='Google+で詳細を見る'>Google+で詳細を見る</a></p>":"";
if(place.photos){
var cho=arrayShuffle(place.photos.length)[0];
s+="<p class='picframe'>";
$.each(place.photos,function(x,pic){
if(x==cho) s+="<img src='"+pic.getUrl({"maxWidth":picmaxWidth,"maxHeight":picmaxHeight})+"' class='shadow size' />";
});
s+="</p>";
}
/* 営業時間 */
var tmp={};
if(place.opening_hours){
$.each(place.opening_hours.periods,function(x,openclose){
var open=(openclose.open && openclose.open.time)?openclose.open.time:"";
var close=(openclose.close && openclose.close.time)?openclose.close.time:"";
if(!tmp[fChgWeek(openclose.open.nextDate)]){
tmp[fChgWeek(openclose.open.nextDate)]=new Array();
}
tmp[fChgWeek(openclose.open.nextDate)].push([open,close]);
});
var tmpmax=aryCount(tmp);
s+="<table>";
for(var i in tmp){
if(i==0){
s+="<tr"+(((i)==fGetWeek())?" class='cur'":"")+"><th rowspan='"+tmpmax+"'>営業時間<span>"+((place.opening_hours.open_now)?"営業中！":"営業時間外")+"</span></th>";
}else{
s+="<tr"+(((i)==fGetWeek())?" class='cur'":"")+">";
}
s+="<td>"+week[i]+"曜日 ";
if(tmp[i]){
for(var j in tmp[i]){
if(tmp[i][j]){
if(tmp[i][j][0]=="0000" && !tmp[i][j][1]){
s+="24時間営業";
}else{
if(tmp[i][j][0]){
s+=tmp[i][j][0].substring(0,2)+"時"+tmp[i][j][0].substring(2,4)+"分";
}
if(tmp[i][j][1]){
if(tmp[i][j][0]) s+="～";
s+=tmp[i][j][1].substring(0,2)+"時"+tmp[i][j][1].substring(2,4)+"分 ";
}
}
}
}
}
s+="</td></tr>";
}
s+="</table>";
}
/* クチコミ */
if(place.reviews){
var _s="";
var rcnt=0;
$.each(place.reviews,function(x,review){
var author_name=(review.author_name)?review.author_name:"";
var author_url=(review.author_url)?review.author_url:"";
var reviewtext=(review.text)?review.text:"";
var reviewtime=(review.time)?fChgTime(review.time):"";
if(reviewtext!=""){
_s+="<li>";
_s+="<b>"+((author_url)?"<a href='"+author_url+"' target='_blank'>"+author_name+"</a>":author_name)+"</b>";
_s+=(reviewtime)?"（"+reviewtime+"）":"";
_s+="<p>"+reviewtext+"</p>";
_s+="</li>";
rcnt++;
}
});
if(_s!=""){
s+="<p><a href='"+place.url+"' target='_blank'>"+rcnt+"件のクチコミ</a></p>";
s+="<div class='comment size'><ul>"+_s+"</ul></div>";
}
}
infowindow.setContent("<div class='infowin'>"+s+"</div>");
infowindow.open(map, marker);
marker.setZIndex(9999);
openFLG[id]=1;
});
}else{
infowindow.close();
openFLG[id]=0;
}
});
}
//プレイスタイプ
var places_types={
"accounting":"会計事務所",
"airport":"空港",
"amusement_park":"遊園地",
"aquarium":"水族館",
"art_gallery":"アート ギャラリー",
"atm":"ATM",
"bakery":"ベーカリー、パン屋",
"bank":"銀行",
"bar":"居酒屋",
"beauty_salon":"ビューティー サロン",
"bicycle_store":"自転車店",
"book_store":"書店",
"bowling_alley":"ボウリング場",
"bus_station":"バスターミナル",
"cafe":"カフェ",
"campground":"キャンプ場",
"car_dealer":"カー ディーラー",
"car_rental":"レンタカー",
"car_repair":"車の修理",
"car_wash":"洗車場",
"casino":"カジノ",
"cemetery":"墓地",
"church":"教会",
"city_hall":"市役所",
"clothing_store":"衣料品店",
"convenience_store":"コンビニエンス ストア",
"courthouse":"裁判所",
"dentist":"歯科医",
"department_store":"百貨店",
"doctor":"医者",
"electrician":"電気工",
"electronics_store":"電器店",
"embassy":"大使館",
"establishment":"施設",
"finance":"金融業",
"fire_station":"消防署",
"florist":"花屋",
"food":"食料品店",
"funeral_home":"葬儀場",
"furniture_store":"家具店",
"gas_station":"ガソリンスタンド",
"general_contractor":"建設会社",
"geocode":"ジオコード",
"grocery_or_supermarket":"スーパー",
"gym":"スポーツクラブ",
"hair_care":"ヘアケア",
"hardware_store":"金物店",
"health":"健康",
"hindu_temple":"ヒンドゥー寺院",
"home_goods_store":"インテリア ショップ",
"hospital":"病院",
"insurance_agency":"保険代理店",
"jewelry_store":"宝飾店",
"laundry":"クリーニング店",
"lawyer":"弁護士",
"library":"図書館",
"liquor_store":"酒店",
"local_government_office":"役場",
"locksmith":"錠屋",
"lodging":"宿泊施設",
"meal_delivery":"出前",
"meal_takeaway":"テイクアウト",
"mosque":"モスク",
"movie_rental":"DVD レンタル",
"movie_theater":"映画館",
"moving_company":"引越会社",
"museum":"美術館/博物館",
"night_club":"ナイト クラブ",
"painter":"塗装業",
"park":"公園",
"parking":"駐車場",
"pet_store":"ペット ショップ",
"pharmacy":"薬局",
"physiotherapist":"理学療法士",
"place_of_worship":"礼拝所",
"plumber":"配管工",
"police":"警察",
"post_office":"郵便局",
"real_estate_agency":"不動産業",
"restaurant":"レストラン",
"roofing_contractor":"防水工事業",
"rv_park":"オート キャンプ場",
"school":"学校",
"shoe_store":"靴屋",
"shopping_mall":"ショッピング モール",
"spa":"温泉、スパ",
"stadium":"スタジアム",
"storage":"倉庫",
"store":"小売店",
"subway_station":"地下鉄駅",
"synagogue":"シナゴーグ",
"taxi_stand":"タクシー乗り場",
"train_station":"駅",
"travel_agency":"旅行代理店",
"university":"大学",
"veterinary_care":"獣医",
"zoo":"動物園",
"administrative_area_level_1":"行政区画レベル 1",
"administrative_area_level_2":"行政区画レベル 2",
"administrative_area_level_3":"行政区画レベル 3",
"colloquial_area":"非公式地域",
"country":"国",
"floor":"階",
"intersection":"交差点",
"locality":"地区",
"natural_feature":"地勢",
"neighborhood":"周辺地域",
"political":"政治",
"point_of_interest":"スポット",
"post_box":"ポスト",
"postal_code":"郵便番号",
"postal_code_prefix":"郵便番号のプレフィックス",
"postal_town":"郵便番号に対応する都市",
"premise":"建物名",
"room":"部屋",
"route":"ルート",
"street_address":"住所",
"street_number":"番地",
"sublocality":"下位地区",
"sublocality_level_4":"下位地区レベル 4",
"sublocality_level_5":"下位地区レベル 5",
"sublocality_level_3":"下位地区レベル 3",
"sublocality_level_2":"下位地区レベル 2",
"sublocality_level_1":"下位地区レベル 1",
"subpremise":"区画",
"transit_station":"駅、停留所"
};
var week={
"0":"日",
"1":"月",
"2":"火",
"3":"水",
"4":"木",
"5":"金",
"6":"土"
};
//連想配列カウント
function aryCount(ary){
var i=0;
for(key in ary ){ i++; }
return i;
}
//shuffle
function arrayShuffle(len){
var ary=new Array();
for(var x=0; x<len; x++){
ary.push(x);
}
var i=len;
while(i){
var j=Math.floor(Math.random()*i);
var t=ary[--i];
ary[i]=ary[j];
ary[j]=t;
}
return ary;
}
//URLからドメインだけ取得
function fGetDomain(str){
if(str){
var domain=str.match(/^(?:([^:\/?#]+):)?(?:\/\/([^\/?#]*))?([^?#]*)(?:\?([^#]*))?(?:#(.*))?/);
return (domain[2])?domain[2]:str;
}
}
//曜日取得
function fGetWeek(){
var d=new Date();
return d.getDay();
}
//日付文字列に変換
function fChgTime(EpochSec){
var d=new Date();
d.setTime(EpochSec*1000);
var year=d.getFullYear();
var month=d.getMonth()+1;
var day=d.getDate();
return year+"/"+month+"/"+day;
}
//曜日に変換
function fChgWeek(EpochSec){
var d=new Date();
d.setTime(EpochSec);
return d.getDay();
}
function dbg(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
});
</script>
</head>
<body>
<h1>設置サンプル - GMAPv3 - プレイスライブラリ - プレイス詳細</h1>
<p>六本木周辺半径500m以内のレストラン、カフェ、飲食店などプレイスに登録されているすべてのスポットの詳細情報（名称、住所、電話番号、URL、営業時間、写真、クチコミなど）を表示します。【現在地で検索する】ボタンを押すと現在地半径500m以内が検索範囲となります。</p>
<p><a href="#" class="button" id="btn">現在地で検索する</a></p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
場所タイプの種類
2013/4/7
プレイス検索で、場所のタイプを絞る場合は、リクエスト時に以下のタイプを指定します。カンマ区切りで、複数指定もできます。 サポートされている場所タイプは、Supported Place Typesに掲載されています。
| Place Types | 説明 |
|---|---|
| accounting | 会計事務所 |
| airport | 空港 |
| amusement_park | 遊園地 |
| aquarium | 水族館 |
| art_gallery | アート ギャラリー |
| atm | ATM |
| bakery | ベーカリー、パン屋 |
| bank | 銀行 |
| bar | 居酒屋 |
| beauty_salon | ビューティー サロン |
| bicycle_store | 自転車店 |
| book_store | 書店 |
| bowling_alley | ボウリング場 |
| bus_station | バスターミナル |
| cafe | カフェ |
| campground | キャンプ場 |
| car_dealer | カー ディーラー |
| car_rental | レンタカー |
| car_repair | 車の修理 |
| car_wash | 洗車場 |
| casino | カジノ |
| cemetery | 墓地 |
| church | 教会 |
| city_hall | 市役所 |
| clothing_store | 衣料品店 |
| convenience_store | コンビニエンス ストア |
| courthouse | 裁判所 |
| dentist | 歯科医 |
| department_store | 百貨店 |
| doctor | 医者 |
| electrician | 電気工 |
| electronics_store | 電器店 |
| embassy | 大使館 |
| establishment | 施設 |
| finance | 金融業 |
| fire_station | 消防署 |
| florist | 花屋 |
| food | 食料品店 |
| funeral_home | 葬儀場 |
| furniture_store | 家具店 |
| gas_station | ガソリンスタンド |
| general_contractor | 建設会社 |
| geocode | ジオコード |
| grocery_or_supermarket | スーパー |
| gym | スポーツクラブ |
| hair_care | ヘアケア |
| hardware_store | 金物店 |
| health | 健康 |
| hindu_temple | ヒンドゥー寺院 |
| home_goods_store | インテリア ショップ |
| hospital | 病院 |
| insurance_agency | 保険代理店 |
| jewelry_store | 宝飾店 |
| laundry | クリーニング店 |
| lawyer | 弁護士 |
| library | 図書館 |
| liquor_store | 酒店 |
| local_government_office | 役場 |
| locksmith | 錠屋 |
| lodging | 宿泊施設 |
| meal_delivery | 出前 |
| meal_takeaway | テイクアウト |
| mosque | モスク |
| movie_rental | DVD レンタル |
| movie_theater | 映画館 |
| moving_company | 引越会社 |
| museum | 美術館/博物館 |
| night_club | ナイト クラブ |
| painter | 塗装業 |
| park | 公園 |
| parking | 駐車場 |
| pet_store | ペット ショップ |
| pharmacy | 薬局 |
| physiotherapist | 理学療法士 |
| place_of_worship | 礼拝所 |
| plumber | 配管工 |
| police | 警察 |
| post_office | 郵便局 |
| real_estate_agency | 不動産業 |
| restaurant | レストラン |
| roofing_contractor | 防水工事業 |
| rv_park | オート キャンプ場 |
| school | 学校 |
| shoe_store | 靴屋 |
| shopping_mall | ショッピング モール |
| spa | 温泉、スパ |
| stadium | スタジアム |
| storage | 倉庫 |
| store | 小売店 |
| subway_station | 地下鉄駅 |
| synagogue | シナゴーグ |
| taxi_stand | タクシー乗り場 |
| train_station | 駅 |
| travel_agency | 旅行代理店 |
| university | 大学 |
| veterinary_care | 獣医 |
| zoo | 動物園 |
| administrative_area_level_1 | 行政区画レベル 1 |
| administrative_area_level_2 | 行政区画レベル 2 |
| administrative_area_level_3 | 行政区画レベル 3 |
| colloquial_area | 非公式地域 |
| country | 国 |
| floor | 階 |
| intersection | 交差点 |
| locality | 地区 |
| natural_feature | 地勢 |
| neighborhood | 周辺地域 |
| political | 政治 |
| point_of_interest | スポット |
| post_box | ポスト |
| postal_code | 郵便番号 |
| postal_code_prefix | 郵便番号のプレフィックス |
| postal_town | 郵便番号に対応する都市 |
| premise | 建物名 |
| room | 部屋 |
| route | ルート |
| street_address | 住所 |
| street_number | 番地 |
| sublocality | 下位地区 |
| sublocality_level_4 | 下位地区レベル 4 |
| sublocality_level_5 | 下位地区レベル 5 |
| sublocality_level_3 | 下位地区レベル 3 |
| sublocality_level_2 | 下位地区レベル 2 |
| sublocality_level_1 | 下位地区レベル 1 |
| subpremise | 区画 |
| transit_station | 駅、停留所 |