マルティスープ
Staff Blog

2017.05.01

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

みんさん、こんちには。

今回は、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);
}

オートコンプリート コンストラクタ

Maps JavaScript API サイトはこちら

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

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

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

いかがでしたか？

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

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