グーグルプレイスで検索
指定された緯度経度とキーワードを元に、グーグルプレイスで検索し、近い順に表示します。
サンプルはこちら
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 );
<?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 );
グーグルに結構な情報がありますので、うまくすれば簡単にポータルサイトが作れそうですね。
