플랫폼 선택: Android iOS JavaScript

기본 Place Autocomplete 구성요소

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

기본 Place Autocomplete 구성요소에는 목록 밀도 및 위치 아이콘 포함 여부와 같은 맞춤설정 옵션이 있습니다. AutocompleteUICustomization을 사용하여 구성요소를 맞춤설정합니다.

기본 Place Autocomplete 구성요소는 독립적으로 또는 다른 Google Maps Platform API 및 서비스와 함께 사용할 수 있습니다.

결제

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

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

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

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

Kotlin

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

자바

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

전체 예시를 참고하세요.

기본 자동 완성 구성요소 맞춤설정

콘텐츠 맞춤설정

목록 밀도

2줄 목록 또는 여러 줄 목록을 표시하도록 선택할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteListDensity (TWO_LINE 또는 MULTI_LINE)의 옵션을 사용합니다. 목록 밀도를 지정하지 않으면 구성요소에 2줄 목록이 표시됩니다.

위치 아이콘

결과 목록에 기본 장소 아이콘을 표시할지 선택할 수 있습니다. AutocompleteUICustomization 클래스에서 AutocompleteUIIcon (listItemDefaultIcon 또는 noIcon)의 옵션을 사용합니다.

테마 맞춤설정

기본 스타일 속성을 재정의하는 테마를 지정할 수 있습니다. 장소 세부정보 구성요소의 색상, 서체, 간격, 테두리, 모서리를 맞춤설정할 수 있습니다. 기본값은 PlacesMaterialTheme입니다.

재정의되지 않은 테마 속성은 기본 스타일을 사용합니다.

Places UI Kit는 기본적으로 어두운 테마를 제공하므로 어두운 테마와 밝은 테마를 모두 맞춤설정해야 할 수 있습니다. 어두운 테마를 맞춤설정하려면 values-night/colors.xml에 색상 항목을 추가합니다.

테마에 관한 자세한 내용은 맞춤 스타일 지정 섹션을 참고하세요.

기본 자동 완성 구성요소에 콘텐츠 및 테마 맞춤설정 추가

AutocompleteUICustomization 클래스를 사용하여 기본 자동 완성 구성요소를 맞춤설정합니다.

Kotlin

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

자바

.setAutocompleteUiCustomization(
  AutocompleteUiCustomization.builder()
    .listItemIcon(AutocompleteUiIcon.noIcon())
    .listDensity(AutocompleteListDensity.MULTI_LINE)
    .theme(R.style.CustomizedTheme)
    .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(),
          theme = R.style.CustomizedTheme,
        )
      )
    }
  
  basicPlaceAutocompleteActivityResultLauncher.launch(autocompleteIntent)

자바

  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>