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.05.19

Googleマップに同心円を描画する

みなさん、こんにちは。

Googleマップ上に同心円を書きたいと思ったことはありませんか? 私は、よくあります。

マルティスープで・・・

続きを読む

2017.09.24

Googleマップ上にベクトルタイルを描画してみる

みなさん、こんにちは。

前回のブログで紹介したベクトルタイルを 、Google マップ上に描画する方法を調査してみました。

&nb・・・

続きを読む

2017.10.28

GoogleマップにFusion Tablesを使ってマーカーを7万個描画する

みなさん、こんにちは。

今回は、Google  Fusion Tables にデータを登録し、Google Maps JavaScript A・・・

続きを読む

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

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

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

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

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