読者です 読者をやめる 読者になる 読者になる

グーグルプレイスで検索

f:id:haru-komugi:20140718120323j:plain
指定された緯度経度とキーワードを元に、グーグルプレイスで検索し、近い順に表示します。

サンプルはこちら
http://moeten.info/js/20140718_googlePlaceTest/

ソースコードはこちら
index.html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title></title>
  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="lib/jquery.tmpl.min.js"></script>
  <script type="text/javascript">

    $(function(){

      //初期化
      /*------------------------------------------------------------*/
      function init(){

        //イベントリスナーの登録
        addEventListner();

        //グーグル検索
        getList();

      }

      //イベントリスナーの登録
      /*------------------------------------------------------------*/
      function addEventListner(){

        //タブクリックイベント
        $("#category li").bind("click",function(){

          //選択スタイルの調整
          $("#category li").removeClass("selected");
          $(this).addClass("selected");

          //グーグル検索
          getList();

        });

        //アイテムリストクリックイベント
        $("#resultList li button").live("click",function(){

          //詳細をグーグル検索
          getDetail( $(this).attr("reference") );

        });

      }

      //グーグル検索
      /*------------------------------------------------------------*/
      function getList(){

        //console.log( $("#category .selected").text());

        $.ajax({
          url: "./proxy.php",
          type: "GET",
          data:{
            "keyword": $("#category .selected").text()
          },
          dataType: 'json',
          success: function(data) {

            //console.log( data );
            $("#resultList").html( $("#templateList").tmpl( data.results ) );

          }
        });

      }

      //詳細をグーグル検索
      /*------------------------------------------------------------*/
      function getDetail( reference ){

        $.ajax({
          url: "./proxy2.php",
          type: "GET",
          data:{
            "reference" : reference
          },
          dataType: 'json',
          success: function(data) {

            //console.log( data );
            $("#resultDetail").html( $("#templateDetail").tmpl( data.result ) );

          }
        });

      }

      //初期化
      init();

    });

  </script>
  <style type="text/css">
    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
    }
    .clearfix {
      min-height: 1px;
    }
    * html .clearfix {
      height: 1px;
      /*¥*//*/
      height: auto;
      overflow: hidden;
      /**/
    }
    *{
      list-style-type: none;
      padding: 0;
      margin: 0;
      font-size: 14px;
      line-height: 1.5;
    }
    body{
      padding: 10px;
    }
    #category{
      padding-top: 10px;
      padding-bottom: 10px;
    }
    #category li{
      border: 1px solid gray;
      width: 100px;
      text-align: center;
      display: inline;
      padding: 10px;
      border-radius: 5px 5px 0 0;
      cursor: pointer;
    }
    #category .selected{
      background: rgb(255, 250, 229);
    }
    #resultList{
      width: 500px;
      float: left;
      border: 1px solid rgb(184, 184, 184);
      border-radius: 10px;
      padding: 9px;
    }
    #resultList li{
      position: relative;
      border-bottom: 1px solid rgb(184, 184, 184);
      margin-bottom: 9px;
      padding-bottom: 9px;
    }
    #resultList li:last-child{
      border:none;
      padding-bottom: 0;
      margin-bottom: 0;
    }
    #resultList li button{
      position: absolute;
      right: 11px;
      padding: 4px 10px;
      bottom: 23px;
      border-radius: 5px;
      border: 1px solid rgb(206, 206, 206);
      background: rgb(241, 241, 241);
    }
    #resultList li .thum{
      float: left;
      width: 80px;
    }
    #resultList li .info{
      float: left;
      width: 400px;
    }
    #resultDetail{
      float: left;
      border: 1px solid rgb(221, 221, 221);
      padding: 10px;
      border-radius: 10px;
      margin-left: 10px;
      background: rgb(247, 247, 247);
    }
    #resultDetail li .thum{
      float: left;
      width: 80px;
    }
    #resultDetail li .info{
      float: left;
      width: 400px;
    }
  </style>
</head>
<body>
<h1>GooglePlace検索</h1>
<ul id="category">
  <li class="selected">ペットショップ</li>
  <li>ドッグラン</li>
  <li>ドッグカフェ</li>
  <li>ペットホテル</li>
  <li>動物病院</li>
  <li>公園</li>
</ul>
<ul id="resultList"></ul>
<script id="templateList" type="text/x-jquery-tmpl">
<li class="clearfix">
  <div class="thum"><img src="${icon}"></div>
  <div class="info">
    <h3>${name}</h3>
    住所:${vicinity}<br/>
    緯度経度:${geometry.location.lat},${geometry.location.lng}<br/>
    カテゴリー:{{each(key) types}}| ${this} {{/each}}
    <button reference="${reference}" >詳細を見る</button>
  </div>
</li>
</script>
<div id="resultDetail"></div>
<script id="templateDetail" type="text/x-jquery-tmpl">
  <div class="thum"><img src="${icon}"></div>
  <div class="info">
    <h3>${name}</h3>
    住所:${vicinity}<br/>
    緯度経度:${geometry.location.lat},${geometry.location.lng}<br/>
    電話番号:${formatted_phone_number}<br/>
    サイト:<a href="${website}" target="_blank">${website}</a><br/>
    カテゴリー:{{each(key) types}}| ${this} {{/each}}
  </div>
</script>
</body>
</html>

javascriptオンリーですと、クロスドメインに引っかかりますので、PHPなどのプロクシをかませてあげます。

キーワードに該当するお店のリスト取得(プロクシ兼)
proxy.php

<?php
error_reporting(0);

$query = array(
  "language"=>"ja", //言語を日本
  "location"=>"37.4967837,139.9299413", //緯度経度
  "rankby"=>"distance", //距離順に並び替え
  "sensor"=>"false",
  "key"=>"GOOGLE_API_KEY"
);

//javascriptから送られてくるキーワードを設定
$query["keyword"] = $_GET['keyword'];
$url = "https://maps.googleapis.com/maps/api/place/nearbysearch/json?" . http_build_query( $query );

//出力
echo file = file_get_contents( $url );

お店の詳細情報取得(プロクシ兼)
proxy2.php

<?php
error_reporting(0);

$query = array(
  "language"=>"ja", //言語を日本
  "sensor"=>"false",
  "key"=>"GOOGLE_API_KEY"
);

//javascriptから送られてくる参照IDを設定
$query["reference"] = $_GET['reference'];
$url = "https://maps.googleapis.com/maps/api/place/details/json?" . http_build_query( $query );

//出力
echo file = file_get_contents( $url );

グーグルに結構な情報がありますので、うまくすれば簡単にポータルサイトが作れそうですね。