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

基本的な Place Autocomplete コンポーネント

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

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

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

課金

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

アプリに基本的なオートコンプリート コンポーネントを追加する

Places UI Kit を使用せずに Place Autocomplete（新版）を使用する場合と同様に、予測入力フィルタ パラメータ（返すタイプ、結果を制限する国、結果の地域座標、距離情報を表示するリクエストのオリジン（利用可能な場合）など）を設定します。手順の詳細と、予測入力フィルタを作成するコードの例については、Place Autocomplete（新版）のドキュメントをご覧ください。

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

Kotlin

AutocompleteUiCustomization.create(
  listDensity = AutocompleteListDensity.MULTI_LINE,
  listItemIcon = AutocompleteUiIcon.noIcon(),
)

Java

      
AutocompleteUiCustomization.builder()
  .listItemIcon(AutocompleteUiIcon.noIcon())
  .listDensity(AutocompleteListDensity.MULTI_LINE)
  .build()

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

基本的な予測入力コンポーネントをカスタマイズする

リストの密度

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

位置情報アイコン

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

基本的な予測入力コンポーネントにカスタマイズを追加する

AutocompleteUICustomization クラスを使用して、基本的な自動補完コンポーネントをカスタマイズします。

Kotlin

.setAutocompleteUiCustomization(
    AutocompleteUiCustomization.create(
      listDensity = AutocompleteListDensity.MULTI_LINE,
      listItemIcon = AutocompleteUiIcon.noIcon(),
    )
)

Java

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .build()
)

例

この例では、カスタムの基本的なオートコンプリート コンポーネントを作成します。

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(),
        )
      )
    }
  
  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)
          .build())
    .build(this);
  
  basicPlaceAutocompleteActivityResultLauncher.launch(basicPlaceAutocompleteIntent);