Selecione a plataforma: Android iOS JavaScript

Componente básico do Place Autocomplete

Com o componente Basic Place Autocomplete do Places UI Kit, é possível adicionar um componente de interface individual que retorna um ID de lugar quando um usuário seleciona um lugar. O componente é uma capa de tela cheia que oferece uma barra de pesquisa para os usuários inserirem uma consulta. À medida que o usuário digita, uma lista de resultados de preenchimento automático aparece abaixo da barra de pesquisa. Quando o usuário toca em um lugar, um objeto com apenas o ID do lugar é retornado ao desenvolvedor. Esse componente é personalizável.

O componente de preenchimento automático básico de lugares tem as seguintes opções de personalização: densidade da lista e inclusão de ícones de local. Use AutocompleteUICustomization para personalizar o componente.

Você pode usar o componente de preenchimento automático básico de lugares de forma independente ou em conjunto com outras APIs e serviços da Plataforma Google Maps.

Faturamento

A cobrança é feita sempre que o componente é aberto e uma consulta é feita. Você não vai receber outra cobrança por essa sessão, a menos que ela expire ou um lugar seja selecionado na lista.

Adicionar o componente de preenchimento automático básico ao app

Defina os parâmetros de filtro de preenchimento automático (por exemplo, os tipos a serem retornados, o país para limitar os resultados, as coordenadas da região para os resultados, a origem da solicitação para mostrar informações de distância, se disponíveis) como faria para usar o Place Autocomplete (New) sem o Places UI Kit. Consulte a documentação do Place Autocomplete (novo) para instruções completas e um exemplo do código para criar um filtro de preenchimento automático.

Depois de criar o filtro de preenchimento automático, adicione suas personalizações de interface. Confira as opções e instruções de personalização.

Kotlin

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

Java

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

Confira o exemplo completo.

Personalizar o componente de preenchimento automático básico

Densidade da lista

Você pode escolher exibir uma lista de duas linhas ou uma lista de várias linhas. Use as opções em AutocompleteListDensity (TWO_LINE ou MULTI_LINE) na classe AutocompleteUICustomization. Se você não especificar a densidade da lista, o componente vai mostrar uma lista de duas linhas.

Ícone de local

Você pode escolher se quer mostrar um ícone de lugar padrão na lista de resultados. Use as opções em AutocompleteUIIcon (listItemDefaultIcon ou noIcon) na classe AutocompleteUICustomization.

Adicionar personalizações ao componente de preenchimento automático básico

Use a classe AutocompleteUICustomization para personalizar o componente de preenchimento automático 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()
)

Exemplo

Este exemplo cria um componente de preenchimento automático 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);