今回はGoogle Places APIのプレイスオートコンプリートとクエリオートコンプリートについて紹介します。
■プレイスオートコンプリートとクエリオートコンプリートについて
・プレイスオートコンプリート
プレイスオートコンプリートはリクエストに基づいてプレイスの予測候補を取得できるウェブサービスです。プレイスオートコンプリートサービスでは文字列と部分一致するプレイスの予測候補が取得できます。
・クエリオートコンプリート
クエリオートコンプリートはリクエストに基づいてクエリの予測候補を取得できるウェブサービスです。クエリオートコンプリートでは具体的な場所を検索するのではなく文字列と部分一致するクエリの予測候補が取得できます。
※プレイスオートコンプリートは場所ベースの予測、クエリオートコンプリートはキーワードベースの予測になるので予測結果は違うものになります。
■Google Places APIを使用するには
Google Developers Consoleで「Places API」を有効にし、API KEYを作成する必要があります。
※Google Developers ConsoleでAPIを有効にする方法とAPI KEYを作成する方法は参考サイトにあるGoogle API 第6回を参照してください。
■プレイスオートコンプリートとクエリオートコンプリートの使い方
１．プレイスオートコンプリート
下記のようなURLにアクセスすると、プレイスの候補が指定した形式(jsonまたはxml)で取得できます。
https://maps.googleapis.com/maps/api/place/autocomplete/output?input=らーめん&key={API_KEY}
outputにはjson(推奨)またはxmlを指定できます。
・URLのパラメータについて
必須パラメータはkey、inputです。
keyはGoogle Developers Consoleで作成したAPI KEYを割り当てます。
inputは検索するテキスト文字列です。部分一致する候補が関連性の高い順に取得されます。
その他のパラメータは、offset、location、radius、language、types、componentsがあります。
offsetはinputパラメータ内でサービスが予測に使用する文字列の位置です。数値で指定します。
offsetの値が3でinputが「Kokura」の場合、「Kok」で予測します。
offsetを使用しない場合、inputの文字列全体を使用し予測します。
locationは数値(緯度と経度)を指定します。
「緯度30°経度130°」を指定する場合は「location=30,130」となります。
radiusにはプレイスの結果を取得する範囲を指定します。50000(メートル)まで指定できます。
languageはプレイスの結果を表示するときの言語です。
typesはプレイスタイプです。指定したプレイスに関係するプレイスを取得できます。
componentsはプレイスの結果を国内に制限できます。
日本国内を指定する場合は「components=country:jp」となります。
プレイス候補は下記のような形式で取得できます。
プレイス候補から詳細な情報が知りたい場合はプレイス詳細リクエストをしましょう。
※プレイス詳細リクエストは、参考サイトにあるGoogle API 第8回を参照してください。
{
"predictions" : [
{
"description" : "日本福岡県北九州市小倉北区神岳２丁目１０ ラーメン無法松",
"id" : "61fbbac88d1f4d2719097f42bbb33085f6dc8c0a",
"matched_substrings" : [
{
"length" : 4,
"offset" : 21
}
],
"place_id" : "ChIJo2anw16_QzURgp1idGilhws",
"reference" : "CmRgAAAAn4NXgrh-Vqh6fLAm7jU5OsyS0PHc3wfT6-EDdb92WeWJdPmlTeaBLYTFTJ1damGMWpJoKSwdQ_yFfIaWTNhh8NSxRINM4WMLlprQ9iDaiunN6XxUxMMjYe8sHv-sLmdBEhDo7K-6ua-ZksQYpb6xyxdCGhSU90gWc0awCuKKpdivjZc19oEtEw",
"terms" : [
{
"offset" : 21,
"value" : "ラーメン無法松"
},
{
"offset" : 18,
"value" : "１０"
},
{
"offset" : 15,
"value" : "２丁目"
},
{
"offset" : 13,
"value" : "神岳"
},
{
"offset" : 9,
"value" : "小倉北区"
},
{
"offset" : 5,
"value" : "北九州市"
},
{
"offset" : 2,
"value" : "福岡県"
},
{
"offset" : 0,
"value" : "日本"
}
],
"types" : [ "establishment" ]
}
],
"status" : "OK"
}
・プレイス候補の戻り値について
predictionsにはプレイスの配列と各プレイスの情報が含まれています。
結果は最大5つまで取得されます。
descriptionは地名やお店、サービスの名称です。
plece_idは一意の場所を特定するIDです。
※現在、idとreferenceの使用は非推奨でplece_idの使用が推奨されています。
termsはdescriptionの各セクションを識別するキーワードの配列です。
matched_substringはoffsetの値とそのlengthです。
必要に応じてそのキーワードを強調表示できるそうです。
２．クエリオートコンプリート
下記のようなURLにアクセスすると、クエリの候補が指定した形式(jsonまたはxml)で取得できます。
https://maps.googleapis.com/maps/api/place/queryautocomplete/output?input=ラーメン&key={API_KEY}
必須パラメータはkey、inputです。
その他のパラメータはoffset、location、radius、languageです。
クエリ候補は下記のような形式で取得できます。
※クエリ候補の戻り値の項目はプレイス候補の戻り値の項目と同じです。
{
"predictions" : [
{
"description" : "日本東京都小金井市貫井北町３−５−７ ラーメン二郎 新小金井街道店",
"id" : "43e70fc0388bc1f6459e57fffb7c1afe22a69a28",
"matched_substrings" : [
{
"length" : 4,
"offset" : 19
}
],
"place_id" : "ChIJ7SFKjcjlGGARVButacXBRq8",
"reference" : "CnRuAAAAMgbCKj2GxrWZ6xBqmsc21B3qdleUxXTtBO8o8x_ZEfhDqfHfOo8Wi7-btKfVps4KY4oEyWNoDx0wyUZUc77mkhLrWITrr9K89qOSSKetyJ4r3Jglh9FXfULy8c_Md38hHbFPvsJjB0Bk9EMw6SljyBIQFRvdSaIeSSBlqubOJC0NdBoUueMJgZq-_k8orG8yx-TJQyvCZ0U",
"terms" : [
{
"offset" : 19,
"value" : "ラーメン二郎 新小金井街道店"
},
{
"offset" : 17,
"value" : "７"
},
{
"offset" : 15,
"value" : "５"
},
{
"offset" : 13,
"value" : "３"
},
{
"offset" : 9,
"value" : "貫井北町"
},
{
"offset" : 5,
"value" : "小金井市"
},
{
"offset" : 2,
"value" : "東京都"
},
{
"offset" : 0,
"value" : "日本"
}
],
"types" : [ "establishment" ]
}
],
"status" : "OK"
}
■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を指定してライブラリをロードします。
検索用のテキストフィールドを用意します。
<input id="textField" type="text" />
そして下記のような関数を作成し、テキストフィールドに文字列を入力するだけでプレイスの候補を取得できます。
オートコンプリートに必要なパラメータは検索文字列だけです。オプションは任意で付加できます。
オプションにはbounds、types、componentRestrictionsを指定しています。boundsは範囲を設定することにより、その範囲を優先した結果を取得できます。typesは設定することにより、そのタイプに応じた結果を取得できます。ここではお店やサービスの結果を取得できるように設定しています。componentRestrictionsはプレイスの結果を国内に制限できます。ここでは日本国内を指定しています。
function sample1() {
var latlngFrom = new google.maps.LatLng(33.889577, 130.885284);
var latlngTo = new google.maps.LatLng(33.989577, 130.985284);
//プレイスを優先的に検索する領域
var bounds = new google.maps.LatLngBounds(latlngFrom, latlngTo);
//検索文字列を取得
var input = document.getElementById('textField');
//検索オプション
var options = {
bounds: bounds,
types: ['establishment'],
componentRestrictions: {country: 'jp'}
};
//オートコンプリート
autocomplete = new google.maps.places.Autocomplete(input, options);
}
オートコンプリートを付加したテキストフィールドを表示します。
※下記のオートコンプリートを付加したテキストフィールドは付録のサンプル１にあります。
検索文字列を入力すると候補地が５つ表示されます。
以上がプレイスオートコンプリートとクエリオートコンプリートの説明になります。
プレイスオートコンプリートは検索した場所と検索文字列から候補地を予測、クエリオートコンプリートは検索文字列から候補地を予測しているようなので同じ検索文字列でも予測される候補地が異なります。
個人的にプレイスオートコンプリートの方がパラメータが多く細かい指定ができ、JavaScriptでも使用することができるのでおすすめです。
次回はGoogle Places APIのAndroidでの使い方について紹介します。
＜参考サイト＞
・プレイスオートコンプリート
・クエリオートコンプリート
・プレイスオートコンプリート(Google Maps JavaScript API)
・Google API 第6回
・Google API 第5回
・Google API 第8回
＜付録＞
・サンプル１
オートコンプリートを付加したテキストフィールドのサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script type="text/javascript">
function sample1() {
var latlngFrom = new google.maps.LatLng(33.889577, 130.885284);
var latlngTo = new google.maps.LatLng(33.989577, 130.985284);
//プレイスを検索する領域
var bounds = new google.maps.LatLngBounds(latlngFrom, latlngTo);
//検索文字列を取得
var input = document.getElementById('textField');
//検索オプション
var options = {
bounds: bounds,
types: ['establishment'],
componentRestrictions: {country: 'jp'}
};
//オートコンプリート
autocomplete = new google.maps.places.Autocomplete(input,options);
}
window.onload = sample1;
</script>
</head>
<body>
<input type="text" id="textField" />
</body>
</html>