Google Places APIオートコンプリートを入力フィールドに追加

このチュートリアルの最後には、次のようになります.

Know what Autocomplete is

Instantiate Autocomplete

Restrict Suggested Addresses to a Specific Region

Change the Drop-down List Style

自動補完とは

AutocompleteはGoogleマップのJavaScript APIのGoogleの場所ライブラリの一部です.
ユーザーが入力フィールドに自分のアドレスを入力したときに、ドロップダウンリストで提案されたアドレスを表示するためにautocomplete APIを使用する方法について説明します.
これは、ユーザーが誤って彼または彼女の場所を共有するとき、またはHTML Geolocation API ブラウザをサポートしません.我々は簡単にこの機能をautocompleteを使用して作業を得ることができます.
我々がする必要がある最初のものは、インデックスの中にGoogle Placesライブラリを含みます.終了体タグの前のHTMLファイル.

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=[YOUR_API_KEY]"></script>

⚠️ Make sure to add your API Key in the URL
Google Maps API → Obtain An API Key

マップJavaScript APIと場所のAPIライブラリが有効になっていることを確認してくださいGoogle Cloud Console .
ご覧のように、URLはジェネリックで、最後に2つのクエリパラメータを追加しました.

キー:GoogleクラウドプラットフォームからのAPIキー.それを得る方法を見つけてください.

ライブラリ:この値は私たちが使用するライブラリ名になります.

自動補完をインスタンス化する

次にやりたいことはautocompleteオブジェクトをインスタンス化することです.

new google.maps.places.Autocomplete();

それはいくつかのパラメータがかかります.
主なものはオートコンプリート機能を追加する入力DOM要素です.
そのために、Autocompleteというid属性を入力フィールドに設定します.

<input
    type="text"
    placeholder="Enter your address"
    id="autocomplete"
/>

次に、括弧内で、入力DOM要素を最初の引数として追加します.

  new google.maps.places.Autocomplete(
      document.getElementById("autocomplete");
  );

🔥 Recommended
Vue.js + Google Maps API for Beginners Video Course

指定されたアドレスを特定の領域に制限する

どのように我々は最小限のタイピングで彼または彼女のアドレスを見つけるのは簡単ですので、ユーザーの場所の近くに特定の領域からアドレスを表示できるかを見てみましょう.
例えば、私はカナダに住んでいます、そして、私がタイプ2 2をタイプするとき、提案されたアドレスは米国と台湾からあります.

私はまだアドレスを得ることができますが、それはかかります.
私は他の都市や国からの提案を示す前にオタワ通りのアドレスを最初に表示したいとしましょう.
それをするために、我々は都市の地理的座標を持っている必要があります.あなたはオタワオンタリオ地理座標のような単純な検索を行うことによってその情報を見つけることができます.

これは実際にDD座標(10進数)です.我々が望むものは単純な標準座標です.
最初のリンクをクリックし、単純な標準が最初のオプションです.

座標を持っているので、自動補完オブジェクトに追加するには、JavaScriptオブジェクトを2番目の引数として渡す必要があります.
コンマの後、JavaScriptオブジェクトを作成し、その中にBoundsというプロパティを定義します.オタワ座標値を引数として渡すLatlngオブジェクトに値を設定します.

new google.maps.places.Autocomplete(
   document.getElementById("autocomplete"), {
      bounds: new google.maps.LatLngBounds(45.4215296, -75.6971931)
   }
)

あなたが見ることができるように、それは他の一致するアドレスが最初に続くオタワのアドレスのすべてを示しています.

ドロップダウンリスト

ドロップダウンリストのスタイルのいくつかをテーマに合わせて変更しましょう.
このイメージは、リストスタイルを変更するために必要なCSSクラスを示します.

まず、各アドレスの左側にあるアイコンを取り除く.PACのアイコンクラス.
インサイド.PACのアイコンクラス、表示を追加:なしそれを隠すために.

<style>
.pac-icon {
  display: none;
}
</style>

各項目のパディングを増やしましょう.対象となるCSSクラスは、PACアイテムです.すべての側面に10ピクセルのパディングを与えます.
次に、テキストのフォントサイズを16ピクセルに増やし、カーソルをポインタに変更します.
最後に、灰色の背景色でPAC項目クラスのホバー状態を与えます.

.pac-item {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
}

.pac-item:hover {
  background-color: #ececec;
}

我々が作った変更を見てみましょう.

それはよく見える.
ご覧の通り、市、州、国は予想通りにフォントサイズが大きいですが、実際の通りの名前は変わりませんでした.
通りの名前のフォントサイズを変更するには、pac item queryという名前のCSSクラスを使用する必要があります.

.pac-item-query {
  font-size: 16px;
}

もう一回試してみましょう!

あなたがGoogle Maps APIについてもっと知りたいならば、私のコースをチェックしてくださいVue.js + Google Maps API for Beginner .
これは、プロのような位置ベースのアプリケーションを構築するために知っておく必要があるすべてをお教えします!