住宅街ビューア

この例では、ユーザーが住所を入力して付近の設備を評価できるように、住所用の Place Autocomplete 検索バーを追加しています。住宅街のユーザーの場合、placeTypePreferences は、住宅での生活に関連する一般的なタイプに設定されます。このサンプルの住所は米国に限定されています。

コードを理解する

場所のタイプの表示頻度を調整する

ローカル コンテキスト ライブラリが返す場所のタイプを指定する際は、weight 属性を使用して、各プロパティに相対的な重み付けを割り当てることができます（相対的な重み付けが高いタイプは表示頻度が高くなります）。この例では、公園や学校がある場合に、それらの表示頻度が高くなるよう指定しています。

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],
index.ts

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],
index.js

Place Autocomplete

Place Autocomplete サービスを使用するには、まずプレイス ライブラリと Maps JavaScript API を読み込む必要があります。Autocomplete のドキュメントでは、地域や場所のタイプに応じた予測のフィルタリングなど、プレイス オートコンプリートの動作のカスタマイズに使用できるすべてのパラメータについて詳しく説明しています。

  1. プロジェクトで Places API を有効にします。
  2. ローカル コンテキスト ライブラリに加えて、プレイス ライブラリ、JavaScript API を読み込みます。

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. Place Autocomplete 検索バーをウェブサイトや地図に追加する方法については、Autocomplete のドキュメントやコードサンプルをご覧ください。この例では、関連する行は次のようになります。

TypeScript

// Build and add the Autocomplete search bar
const input = <HTMLInputElement>document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
index.ts

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

index.js

サンプルを試す