Google Places API を使うと住所の入力欄に オートコンプリート機能 を追加できますが、日本国内限定のWebアプリに組み込む場合の設定方法についてメモしておきます。

以下の設定を行います。

  1. 候補選択後に住所の先頭の「日本」を表示させない
  2. 表示させる候補を日本国内の住所に限定する

これがサンプルコードです。1

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>Google Places API のオートコンプリートを日本国内限定のWebアプリに組み込む場合の設定例</title>
      <!-- 1. region=jpを指定すると、候補選択後の「日本」が表示されなくなる -->
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=jp&region=jp"></script>
      <script>
      (function(window, document)) {
        google.maps.event.addDomListener(window, 'load', function() {
          var input = document.getElementById('address');
          var options = {
            componentRestrictions: {country: 'jp'} // 2. これで日本国内の住所しか表示されなくなる
          };
          autocomplete = new google.maps.places.Autocomplete(input, options);
        });
       })(window, document));
      </script>
    </head>
    <body>
      <input style="width: 300px;" id="address" type="text" placeholder="場所を入力" autocomplete="off">
    </body>
    </html>

「region=jp」の設定は以下のURL「When invoking Google API, specify attribute “region”:…」を参考にしました

http://stackoverflow.com/questions/10626727/google-places-javascript-autocomplete-can-i-remove-the-country-from-the-place-n

  1. Webサーバー上に置いて動作確認してください。直接ブラウザで開くと画像がうまく読み込めないようです。 ↩︎