プラットフォームを選択: Android iOS JavaScript

Basic Place Autocomplete コンポーネント

Places UI キットの Basic Place Autocomplete コンポーネントを使用すると、ユーザーが場所を選択したときにプレイス IDを返す個々の UI コンポーネントを追加できます。このコンポーネントは全画面表示で、ユーザーがクエリを入力するための検索バーが表示されます。ユーザーが入力すると、検索バーの下に予測入力の結果のリストが表示されます。ユーザーが場所をタップすると、プレイス ID のみのプレイスオブジェクトがデベロッパーに返されます。このコンポーネントはカスタマイズ可能です。

Basic Place Autocomplete コンポーネントには、リストの密度と位置情報アイコンを含めるかどうかというカスタマイズオプションがあります。AutocompleteUICustomization を使用してコンポーネントをカスタマイズします。

Basic Place Autocomplete コンポーネントは、単独で使用することも、他の Google Maps Platform API やサービスと組み合わせて使用することもできます。

課金

コンポーネントが開いてクエリが実行されるたびに課金されます。セッションが期限切れになるか、リストから場所が選択されない限り、そのセッションに対して再度課金されることはありません。

アプリに Basic Autocomplete コンポーネントを追加する

Places UI キットを使用せずに Place Autocomplete（New）を使用する場合と同様に、予測入力フィルタパラメータ（返されるタイプ、結果を絞り込む国、結果の地域座標、距離情報を表示するためのリクエストの送信元など）を設定します。予測入力フィルタを作成するコードの例と詳細な手順については、Place Autocomplete（New）のドキュメントをご覧ください。

予測入力フィルタを作成したら、UI のカスタマイズを追加します。カスタマイズオプションと手順をご覧ください。

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
  theme = R.style.CustomizedTheme,
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .theme(R.style.CustomizedTheme)
  .build()

完全な例をご覧ください。

Basic Autocomplete コンポーネントをカスタマイズする

コンテンツのカスタマイズ

リストの密度

2 行のリストまたは複数行のリストを表示できます。AutocompleteUICustomization クラスで AutocompleteListDensity（TWO_LINE または MULTI_LINE）のオプションを使用します。リストの密度を指定しない場合、コンポーネントには 2 行のリストが表示されます。

位置情報アイコン

結果リストにデフォルトの場所アイコンを表示するかどうかを選択できます。AutocompleteUICustomization クラスで AutocompleteUIIcon（listItemDefaultIcon または noIcon）のオプションを使用します。

テーマをカスタマイズする

デフォルトのスタイル属性をオーバーライドするテーマを指定できます。Place Details コンポーネントの色、タイポグラフィ、間隔、枠線、角をカスタマイズできます。デフォルトは PlacesMaterialTheme です。

オーバーライドされていないテーマ属性には、デフォルトのスタイルが使用されます。

Places UI キットにはデフォルトでダークモードが用意されているため、ダークモードとライトモードの両方をカスタマイズする必要がある場合があります。ダークテーマをカスタマイズするには、values-night/colors.xml に色のエントリを追加します。

テーマ設定について詳しくは、カスタムスタイリングをご覧ください。

コンテンツとテーマのカスタマイズを Basic Autocomplete コンポーネントに追加する

AutocompleteUICustomization クラスを使用して、Basic Autocomplete コンポーネントをカスタマイズします。

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
      theme = R.style.CustomizedTheme,
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .build()
)

例

カスタムの Basic Autocomplete コンポーネントを追加します。

Kotlin

  val basicPlaceAutocompleteActivityResultLauncher:
  ActivityResultLauncher<Intent> =
    registerForActivityResult(ActivityResultContracts.StartActivityForResult()) {
      result: ActivityResult ->
        val intent = result.data
        val place: Place? = BasicPlaceAutocomplete.getPlaceFromIntent(intent!!)
        val status: Status? =  
          BasicPlaceAutocomplete.getResultStatusFromIntent(intent!!)
        // ...
      }
  
  val autocompleteIntent: Intent =
    BasicPlaceAutocomplete.createIntent(this) {
      setInitialQuery("INSERT_QUERY_TEXT")
      setOrigin(LatLng(10.0, 10.0))
      // ...
  
      setAutocompleteUiCustomization(
        AutocompleteUiCustomization.create(
          listDensity = AutocompleteListDensity.MULTI_LINE,
          listItemIcon = AutocompleteUiIcon.noIcon(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

Java

  ActivityResultLauncher<Intent> basicPlaceAutocompleteActivityResultLauncher =
    registerForActivityResult(
      new ActivityResultContracts.StartActivityForResult(),
      new ActivityResultCallback<ActivityResult>() {
        @Override
        public void onActivityResult(ActivityResult result) {
          Intent intent = result.getData();
          if (intent != null) {
            Place place =
              BasicPlaceAutocomplete.getPlaceFromIntent(intent);
            Status status =
              BasicPlaceAutocomplete.getResultStatusFromIntent(intent);
            //...
          }
        }
      }
    );
  
  Intent basicPlaceAutocompleteIntent =
    new BasicPlaceAutocomplete.IntentBuilder()
      .setInitialQuery("INSERT_QUERY_TEXT")
      .setOrigin(new LatLng(10.0, 10.0))
      //...
  
      .setAutocompleteUiCustomization(
        AutocompleteUiCustomization.builder()
          .listItemIcon(AutocompleteUiIcon.noIcon())
          .listDensity(AutocompleteListDensity.MULTI_LINE)
          .theme(R.style.CustomizedTheme)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);

テーマをカスタマイズする

 <style name="CustomizedTheme" parent="PlacesMaterialTheme">
    <item name="placesColorPrimary">@color/app_primary_color</item>
    <item name="placesColorOnSurface">@color/app_color_on_surface</item>
    <item name="placesColorOnSurfaceVariant">@color/app_color_on_surface</item>
    <item name="placesTextAppearanceBodySmall">@style/app_text_appearence_small</item>
    <item name="placesCornerRadius">20dp</item>
  </style>