今回はGoogle Places APIのプレイスアクションとプレイスフォトについて紹介します。
■プレイスアクションとプレイスフォトについて
・プレイスアクション
プレイスアクションを使用することでGoogleのプレイスデータベースにないプレイスデータをアプリケーション固有のプレイスデータで補うことができます。プレイスアクションで追加されたデータはアプリケーション固有のデータになります。そのため同じAPI KEYを共有するアプリケーションでデータを共有できます。
・プレイスフォト
プレイスフォトを使用することで簡単に質の高い写真をアプリケーションに追加することができます。また、プレイスやGoogleのデータベースに保存されている数百万件というプレイス関連の写真を利用できます。プレイスフォトでは写真にアクセスできるだけでなく、アプリケーションに最適なサイズに合わせて画像のサイズを変更することができます。
■Google Places APIを使用するには
Google Developers Consoleで「Places API」を有効にし、API KEYを作成する必要があります。
※Google Developers ConsoleでAPIを有効にする方法とAPI KEYを作成する方法は参考サイトにあるGoogle API 第6回を参照してください。
■プレイスアクションとプレイスフォトの使い方
１．プレイスアクション
プレイスアクションではプレイスの追加と削除ができます。
○プレイスの追加
プレイスの追加ではアプリケーション固有のプレイスを追加することができます。プレイスアクションで追加したプレイスはプレイス検索で探せるようになります。
プレイスの追加は下記のようなURLとプレイスのパラメータをjson形式でPOSTリクエストすることでプレイスが追加されます。
//URL
https://maps.googleapis.com/maps/api/place/add/json?key={API_KEY}
//パラメータ
{
"location": {
"lat": 33.890559,
"lng": 130.886432
},
"accuracy": 50,
"name": "Test foods!",
"phone_number": "(000) 0000 0000",
"address": "福岡県北九州市小倉北区浅野0-0-0",
"types": ["food"],
"website": "http://example.com/",
"language": "ja"
}
・パラメータについて
必須パラメータはkey、location、accuracy、name、typesです。
keyはGoogle Developers Consoleで作成したAPI KEYを割り当てます。
locationは数値(緯度と経度)を指定します。
accuracyはプレイス検索で認識される精度です。
nameはプレイスの名前で、255文字以内で指定できます。
phone_numberはプレイスの電話番号です。
addressはプレイスの住所です。
typesはプレイスタイプを指定します。
languageはプレイス検索の結果を表示するときの言語です。
websiteはプレイスの公式ウェブサイトです。
プレイスの追加が行われると下記のようなパラメータが返却されます。
{
"status": "OK",
"place_id": "aaaaaaaaaabbbbbbbbbb1234567",
}
statusは検索結果のステータスです。検索結果の成功や失敗などがわかります。
place_idは場所を一意に識別するIDです。
○プレイスの削除
プレイスアクションで追加したプレイスを削除することができます。
プレイスの削除は下記のようなURLとプレイスのパラメータをjson形式でPOSTリクエストすることでプレイスが削除されます。
//URL
https://maps.googleapis.com/maps/api/place/delete/json?key={API_KEY}
//パラメータ
{
"place_id": "aaaaaaaaaabbbbbbbbbb1234567"
}
・パラメータについて
必須パラメータはkeyとplace_idです。
プレイスの削除が行われると下記のようなパラメータが返却されます。
https://lh6.googleusercontent.com/-dd3uDw1y4RQ/VMlakSLnIiI/AAAAAAAAAAY/-TWo22_71rI/s1600-w400/photo.jpg
２．プレイスフォト
プレイスフォトを使用するときはプレイス検索結果のphotoreferenceパラメータが必要になります。
URLは下記の通りです。
https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=CnRnAAAAay3B2ZJOFd9SPoKvQ8fhp3hfww9HG8Gn7-7uL2zjkxZkgt1rdVBUIkSn-bxjwLzs5JcBixOZIPAWxjSsfOzrO2Pf42czRPv7M0VGf_yoiq_pReHfybiwVdMdGWZm6-KbGfZ-wH-_CPRXihQil8dgNxIQsy6nCATygoiInDwEt9a4XhoUNrNRs0bR-WJTssrN9rtqlE_F3II&key={API_KEY}
・URLのパラメータについて
必須パラメータはkey、photoreference、maxheightまたはmaxwidthです。
photoreferenceは写真を一意に識別するIDです。プレイス検索で取得できます。
maxheight,maxwidthは画像の希望の高さ、幅を1～1600で指定できます。
画像が指定された値より小さい場合は元の画像が表示され、
画像が指定された値より大きい場合は指定された大きさに縮小されます。
アクセスに成功すると、下記のようなURLの画像が表示されます。
https://lh6.googleusercontent.com/-dd3uDw1y4RQ/VMlakSLnIiI/AAAAAAAAAAY/-TWo22_71rI/s1600-w400/photo.jpg
・Google Maps JavaScript APIでの使用法
プレイスフォトはGoogle Maps JavaScript APIのライブラリでも使用することができます。
※Google Maps JavaScript APIについては参考サイトにあるGoogle API 第5回を参照してください。
APIのライブラリを使用するためにスクリプトタグで下記のURLを読み込ませます。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
librariesパラメータにplacesを指定してライブラリをロードします。
ライブラリでプレイスフォトを使用するにはプレイスの検索結果が必要になります。検索結果からphotosパラメータにアクセスすることでプレイスフォトが取得できます。
function callback(results) {
var photos = results[0].photos;
}
Googleマップに検索した場所のプレイスフォトを表示します。
プレイスフォトの大きさは35×35に設定しています。
※下記のGoogleマップは付録のサンプル１にあります。
以上がプレイスアクションとプレイスフォトの説明になります。
プレイスアクションではアプリケーション固有のプレイスを追加できるので同様の機能を持つアプリケーションとの差別化が図れます。
プレイスフォトではマーカーのかわりに写真をアイコンとして表示できるので一風変わったGoogleマップを作成できます。
プレイスアクションに写真を登録できる機能があればプレイスフォトと連携することができるので、今後のプレイスアクションの発展に期待したいです。
次回はGoogle Places APIのプレイスオートコンプリートとクエリオートコンプリートについて紹介します。
＜参考サイト＞
・プレイスアクション
・プレイスフォト
・プレイスフォト(Google Maps JavaScript API)
・Google API 第6回
・Google API 第5回
＜付録＞
・サンプル１
プレイス検索結果をプレイスフォトで表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript">
var map;
function sample1() {
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
//マップの表示
map = new google.maps.Map(document.getElementById("map_canvas1"), opts);
//検索パラメータ
var request = {
//検索の中心座標
location: latlng,
//検索の範囲(メートル)
radius: '500',
//検索文字列
query: 'restaurant'
};
//プレイス検索
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
//検索結果の処理
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
//マーカーを表示
function createMarker(place) {
//プレイスフォトを取得
var photos = place.photos;
if (!photos) {
return;
}
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map,
title :place.name,
icon: photos[0].getUrl({'maxWidth': 35, 'maxHeight': 35})
});
}
window.onload = sample1;
</script>
</head>
<body>
<div id="map_canvas1" style="width:300px; height:300px">