2017.05.01
Google Places API オートコンプリートで地名検索を素早くする
![img](https://maps.multisoup.co.jp/wp-content/uploads/2017/04/img-3.png)
みんさん、こんちには。
今回は、Google Places API のオートコンプリートについて、ご紹介します。
オートコンプリートの機能は、テキストボックスに文字を入力すると、検索と同様に、ユーザの入力に応じた予測結果を表示してくれるものです。
よく Google マップのサイトで住所を入力すると、リストに候補を表示してくれますよね。あれと、同じ機能です!
オートコンプリートを実装する方法は、「Web Service API」と「Maps JavaScript API」の2種類ありますが、今回は「Maps JavaScript API」の方法をご紹介します。
Maps JavaScript API オートコンプリート
JavaScriptAPIを使用する際に追加スクリプトは、読み込ませる箇所とload時に実行するスクリプトです。
// 読み込ませる箇所
< script src="https://maps.google.com/maps/api/js?v=3&key=API_KEY&language=ja">< /script>
// load時に実行
function initAutocomplete() {
//対応させるテキストボックス
var input = document.getElementById('search-text');
//プレイスを検索する領域
var LatLngFrom = new google.maps.LatLng(35.692195,139.7576653);
var LatLngTo = new google.maps.LatLng(35.696157,139.7525771);
var bounds = new google.maps.LatLngBounds(LatLngFrom, LatLngTo);
//オートコンプリートのオプション
var options = {
types: ['(regions)'], // 検索タイプ
bounds: bounds, // 範囲優先検索
componentRestrictions: {country: 'jp'} // 日本国内の住所のみ
};
autocomplete = new google.maps.places.Autocomplete( input, options);
}
オートコンプリート コンストラクタ
コンストラクタ | プロパティ | 説明 | |
---|---|---|---|
text | – | テキストボックスなどのinput要素。オートコンプリート サービスが入力結果を確認し、入力した予測結果を付加する入力フィールド。 | |
options | types | ||
geocode | ジオコーディングの結果のみを返す。 | ||
address | ジオコーディングの結果のみ(正確な住所情報)を返す。 | ||
establishment | お店やサービスの結果のみを返す。 | ||
(regions) |
|
||
(cities) | locality(地区)または administrative_area3(行政区画 3)と一致する結果を返す。 | ||
bounds | 優先して検索する地域(場所)を指定する。 | ||
componentRestrictions | 検索結果を特定のグループに制限する。例)日本のみ検索対象にするなど | ||
placeIdOnly | プレイス ID のみを取得する。 |
Maps JavaScript API サイトはこちら
こちらがサンプルです。テキストボックスに郵便番号を入力すると、オートコンプリートで候補を表示してくれます。
また、JavaScript ではなく Web Service API で行うこともできます。詳しくは下記サイトをご覧ください。
https://developers.google.com/places/web-service/autocomplete?hl=ja
いかがでしたか?
設定によっては、郵便番号以外にも住所や施設名などを表示させることもできます。
この Google ならではの機能、非常に便利ですので是非ご活用ください。!
地図や位置情報を用いたシステムのご提案・開発ならマルティスープへ
マルティスープは、創業以来のGISとモバイル開発の実績と技術力で、営業支援システムやリサーチ・公共インフラ・工事・警備業界の現場を支援するシステム開発など、地図や位置情報を使った業務システムの導入のご提案や開発をいたします。
現場をつなぐコミュニケーションが屋内外業務のパフォーマンスを最大限に。マルティスープのiField(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。
位置・空間情報のエキスパート集団として一緒に働きませんか?
マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!
【関連記事】こんな記事も読まれています
2017.01.06
みなさん、あけましておめでとうございます!
2017年も本ブログでは、グーグルマップをはじめ地図や位置情報に関するおもしろい情報を発信して・・・
2016.08.26
みなさん、こんにちは!
前回、Googleマップで無償地図の「OpenStreetMap」を表示する方法を説明しましたが、今回は同じような形で・・・
2018.04.08
みなさん、こんちちは。
前回は、Googleマップ上に地域メッシュを緯度経度から計算して描画する方法を解説しました。しかし、ただ地域メッシュを・・・
-
最新記事New Posts
-
人気記事Popular Posts
-
関連タグRelated Tags
-
アーカイブArchive