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(アイ・フィールド)®シリーズは、屋内外業務の現場の実力を減少させるコミュニケーション障壁を除き、使い慣れたスマートデバイスを使って 現場の実力をリアルに伝えるサービス。

位置・空間情報のエキスパート集団として一緒に働きませんか?

マルティスープは地図情報をはじめとする位置・空間情報技術のエキスパート集団です。当社で日々研究している地図や位置情報といった技術は、災害支援など貢献度の高いシステムとして使用されることもあれば、スマートフォンアプリのゲームとして使われることもあり、その利用用途・価値は、今後もますます広がっていっています。
私たちの企業理念は、「創る喜び、使う喜び」です。
今後の開発体制をより強化するために、新卒・中途問わず、当社の未来を共に創っていただける新メンバーを募集します!

【関連記事】こんな記事も読まれています

2018.01.14

Googleマップに表示されるお店のアイコンを消したい

みなさん、こんにちは。

Googleマップ上には色々なお店のアイコンがありますが、用途によってはいらないな~と思うことはありませんか?

続きを読む

2017.04.08

Googleマップで見る「ブラタモリマップ」を作成してみました

みなさん、こんにちは。

国民的人気番組「ブラタモリ」でタモリさんが訪れた街を Google マップ上で表示する「ブラタモリマップ」を作成し・・・

続きを読む

2017.02.01

Embed API で会社のアクセスマップを作成する

こんにちは。

会社のホームページにアクセスマップを作成することがありますが、みなさんどのように作成していますか?

昔はFLASHや・・・

続きを読む

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