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 サイトはこちら

 

こちらがサンプルです。テキストボックスに郵便番号を入力すると、オートコンプリートで候補を表示してくれます。

Full Screen

 

また、JavaScript ではなく Web Service API で行うこともできます。詳しくは下記サイトをご覧ください。

https://developers.google.com/places/web-service/autocomplete?hl=ja

 

いかがでしたか?

設定によっては、郵便番号以外にも住所や施設名などを表示させることもできます。

この Google ならではの機能、非常に便利ですので是非ご活用ください。!

 

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

2017.03.22

Google マップで「竹島」と表示する方法は?

みなさん、こんにちは。

Google Maps JavaScript API は、みなさんご存知のとおり多言語に対応した地図です。そのため、l・・・

続きを読む

2018.01.13

Google Maps JavaScript API で描画ツールを利用してみる

みなさん、こんにちは。

Google Maps JavaScript API で地図上にラインや円、ポリゴン、四角形、マーカーを描画するツール・・・

続きを読む

2017.04.15

JavaScript API でよく使う地図オプション

みなさん、こんにちは!

今回は、「JavaScript・・・

続きを読む

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

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)