Selecciona la plataforma: Android iOS JavaScript

Componente básico de Place Autocomplete

El componente Basic Place Autocomplete del kit de IU de Places te permite agregar un componente de IU individual que devuelve un ID de lugar cuando un usuario selecciona un lugar. El componente es una cobertura de pantalla completa que proporciona una barra de búsqueda para que los usuarios ingresen una consulta. A medida que el usuario escribe, aparecerá una lista de resultados de autocompletado debajo de la barra de búsqueda. Cuando el usuario presiona un lugar, se devuelve al desarrollador un objeto de lugar que solo contiene el ID del lugar. Este componente se puede personalizar.

El componente Basic Place Autocomplete tiene las siguientes opciones de personalización: densidad de la lista y si se deben incluir íconos de ubicación. Usa AutocompleteUICustomization para personalizar el componente.

Puedes usar el componente Basic Place Autocomplete de forma independiente o en conjunto con otras APIs y servicios de Google Maps Platform.

Facturación

Se te factura cada vez que se abre el componente y se realiza una búsqueda. No se te volverá a facturar por esa sesión, a menos que venza o se seleccione un lugar de la lista.

Agrega el componente Basic Autocomplete a tu app

Configura los parámetros del filtro de autocompletado (por ejemplo, los tipos que se devolverán, el país al que se limitarán los resultados, las coordenadas de la región para los resultados, el origen de la solicitud para mostrar información de distancia, si está disponible) como lo harías para usar Place Autocomplete (nuevo) sin el kit de IU de Places. Consulta la documentación de Place Autocomplete (nuevo) para obtener instrucciones completas y un ejemplo del código para crear un filtro de autocompletado.

Una vez que hayas creado tu filtro de autocompletado, agrega tus personalizaciones de la IU. Consulta las opciones y las instrucciones de personalización.

Kotlin

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

Java

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

Consulta el ejemplo completo.

Personaliza el componente Autocompletar básico

Densidad de la lista

Puedes elegir mostrar una lista de dos líneas o una lista de varias líneas. Usa las opciones en AutocompleteListDensity (TWO_LINE o MULTI_LINE) en la clase AutocompleteUICustomization. Si no especificas la densidad de la lista, el componente mostrará una lista de dos líneas.

Ícono de ubicación

Puedes elegir si quieres mostrar un ícono de lugar predeterminado en la lista de resultados. Usa las opciones en AutocompleteUIIcon (listItemDefaultIcon o noIcon) en la clase AutocompleteUICustomization.

Agrega personalizaciones al componente Basic Autocomplete

Usa la clase AutocompleteUICustomization para personalizar el componente Autocompletar básico.

Kotlin

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

Java

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

Ejemplo

En este ejemplo, se crea un componente de autocompletado básico personalizado.

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