住宅街ビューア

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

この例では、ユーザーが住所を入力して付近の設備を評価できるように、住所用の 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 },
],

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 },
],

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 = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

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);

サンプルを試す