PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル - GMAPv3 - プレイスライブラリ

場所の矩形領域内検索(bounds)

「六本木」の矩形領域内にあるレストラン、カフェ、飲食店などのスポット情報を表示します。【現在地で検索する】ボタンを押すと現在地を中心とした矩形領域が検索範囲となります。

現在地で検索する

設置サンプルのソース

<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <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>