MULTISOUP

MULTISOUP

MULTISOUP

マルティスープ
Staff Blog

Introduction example

2017.05.01

Google Places API オートコンプリートで地名検索を素早くする

img

みんさん、こんちには。

今回は、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)
  • 下記のタイプのすべてと一致する結果を返す。
  • ・locality(地区)
  • ・sublocality(下位地区)
  • ・postal_code(郵便番号)
  • ・country(国)
  • ・administrative_area1(行政区画 1)
  • ・administrative_area2(行政区画 2)
(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.03.11

GoogleマップにGeoJSONで図形を描画する

みなさん、こんにちは!

前回、KMLファイルを使って図形を描画する方法を紹介しましたが、今回は GeoJSON ファイルを使って図形を描画・・・

続きを読む

2017.01.16

東京の花粉量をヒートマップで可視化する

みなさん、こんにちは!

Google Maps JavaScript API のライブラリには、データ可視化ライブラリ(visualiza・・・

続きを読む

2016.12.22

未来の交通状況を考慮したルート検索

みなさん、こんにちは。

 

Google Maps API では、指定した日時の交通状況を予測したかたちでルート検索を行・・・

続きを読む

 - Google Maps APIs, Google Maps JavaScript API, Google Places API, スタッフ日記