플랫폼 선택: Android iOS JavaScript

기본 Place Autocomplete 구성요소

Places UI Kit의 기본 Place Autocomplete 구성요소를 사용하면 사용자가 장소를 선택할 때 장소 ID를 반환하는 개별 UI 구성요소를 추가할 수 있습니다. 이 구성요소는 사용자가 검색어를 입력할 수 있는 검색창을 제공하는 전체 화면 커버입니다. 사용자가 입력하면 검색창 아래에 자동 완성 결과 목록이 표시됩니다. 사용자가 장소를 탭하면 장소 ID만 있는 장소 객체가 개발자에게 반환됩니다. 이 구성요소는 맞춤설정할 수 있습니다.

기본 장소 자동 완성 구성요소에는 목록 밀도와 위치 아이콘 포함 여부라는 맞춤설정 옵션이 있습니다. AutocompleteUICustomization를 사용하여 구성요소를 맞춤설정합니다.

기본 장소 자동 완성 구성요소는 독립적으로 사용하거나 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다.

결제

구성요소가 열리고 쿼리가 실행될 때마다 요금이 청구됩니다. 세션이 만료되거나 목록에서 장소를 선택하지 않는 한 해당 세션에 대해 다시 청구되지 않습니다.

앱에 기본 자동 완성 구성요소 추가

Places UI Kit 없이 Place Autocomplete (New)을 사용하는 것처럼 자동 완성 필터 매개변수 (예: 반환할 유형, 결과를 제한할 국가, 결과의 지역 좌표, 사용 가능한 경우 거리 정보를 표시할 요청의 출처)를 설정합니다. 전체 안내와 자동 완성 필터를 만드는 코드 예시Place Autocomplete (신규) 문서를 참고하세요.

자동 완성 필터를 만든 후 UI 맞춤설정을 추가합니다. 맞춤설정 옵션 및 안내를 확인하세요.

Kotlin

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

자바

      
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(),
    )
)

자바

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