Search
  1. プレイスライブラリについて
  2. 指定した場所の半径1km以内にあるスポット情報をタイプ別に検索〔場所の周囲検索(location+radius)、タイプ指定あり〕
  3. 特定の矩形領域にあるスポット情報をタイプ別に検索〔場所の矩形領域内検索(bounds)、タイプ指定あり〕
  4. 指定した住所の周辺にあるスポット情報をすべて表示〔場所の周囲検索(location+radius)、タイプ指定なし〕
  5. スポットの詳細情報を表示〔プレイス詳細リクエスト〕
  6. 場所タイプの種類

プレイスライブラリについて

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付近の住所。
例)港区六本木7−22−2

指定した場所の半径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住所
例)日本, 東京都港区六本木7−22−2
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.periods1週間分の営業時間。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
reviewsGoogle+に投稿されたその場所のクチコミレビュー配列。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_offsetUTCオフセット。
例)540
vicinity付近の住所。住所と同じ?
例)港区六本木7−22−2
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アート ギャラリー
atmATM
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_rentalDVD レンタル
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駅、停留所

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women