Places Widgets

Classe PlaceAutocompleteElement

Classe google.maps.places.PlaceAutocompleteElement

PlaceAutocompleteElement é uma subclasse HTMLElement que fornece um componente de interface para a API Places Autocomplete.

O PlaceAutocompleteElement usa AutocompleteSessionTokens internamente para agrupar as fases de consulta e seleção de uma pesquisa de preenchimento automático do usuário.

A primeira chamada para Place.fetchFields em um Place retornado por PlacePrediction.toPlace vai incluir automaticamente o token de sessão usado para buscar o PlacePrediction.

Consulte https://developers.google.com/maps/documentation/places/web-service/place-session-tokens para mais detalhes sobre como os tokens de sessão funcionam.

Elemento personalizado:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

Essa classe estende HTMLElement.

Essa classe implementa PlaceAutocompleteElementOptions.

Acesse ligando para const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parâmetros: 
includedPrimaryTypes
Tipo:  Array<string> optional
Tipo de lugar principal incluído (por exemplo, "restaurant" ou "gas_station").

Um lugar só será retornado se o tipo principal dele estiver incluído nessa lista. É possível especificar até cinco valores. Se nenhum tipo for especificado, todos os tipos de lugar serão retornados.
Atributo HTML:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
Tipo:  Array<string> optional
Inclua apenas resultados nas regiões especificadas, que podem ser até 15 códigos de região de dois caracteres do CLDR. Um conjunto vazio não restringe os resultados. Se locationRestriction e includedRegionCodes forem definidos, os resultados vão estar na área de interseção.
Atributo HTML:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
Tipo:  LocationBias optional
Um limite flexível ou uma dica para usar ao pesquisar lugares.
locationRestriction
Tipo:  LocationRestriction optional
Limites para restringir os resultados da pesquisa.
name
Tipo:  string optional
O nome a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para mais detalhes. Segue o mesmo comportamento do atributo de nome para entradas. Esse é o nome que será usado quando um formulário for enviado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para mais detalhes.
Atributo HTML:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
A origem para calcular a distância. Se não for especificada, a distância não será calculada. A altitude, se fornecida, não é usada no cálculo.
Atributo HTML:
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
placeholder
Tipo:  string
O texto de preenchimento a ser exibido no elemento de entrada.
requestedLanguage
Tipo:  string optional
Um identificador do idioma em que os resultados devem ser retornados, se possível. Os resultados no idioma selecionado podem receber uma classificação mais alta, mas as sugestões não são restritas a esse idioma. Consulte a lista de idiomas compatíveis.
Atributo HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Tipo:  string optional
Um código de região usado para formatação e filtragem de resultados. Ele não restringe as sugestões a esse país. O código de região aceita um valor de dois caracteres de ccTLD ("domínio de nível superior"). A maioria dos códigos ccTLD é idêntica aos códigos ISO 3166-1, com algumas exceções notáveis. Por exemplo, o ccTLD do Reino Unido é "uk" (.co.uk), enquanto o código ISO 3166-1 é "gb" (tecnicamente para a entidade "Reino Unido da Grã-Bretanha e Irlanda do Norte").
Atributo HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
Tipo:  UnitSystem optional
O sistema de unidades usado para mostrar distâncias. Se não for especificado, o sistema de unidades será determinado por requestedRegion.
Atributo HTML:
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
value
Tipo:  string
O valor do elemento de entrada.
prediction-item-icon
Esse slot aceita exatamente um elemento <template> para renderizar como o ícone mostrado ao lado do item de previsão.
input
O elemento de entrada para o elemento de preenchimento automático.
prediction-item
Um item no menu suspenso de previsões que representa uma única previsão.
prediction-item-icon
O ícone exibido à esquerda de cada item na lista de previsões.
prediction-item-main-text
Uma parte do prediction-item que é o texto principal da previsão. Para localizações geográficas, este item contém o nome de um lugar, como "São Paulo", ou o nome de uma rua e o número, como 'Avenida Paulista, 2013'. Por padrão, o prediction-item-main-text fica em preto. Qualquer outro texto no prediction-item vai estar fora de prediction-item-main-text e herdar o estilo de prediction-item. A cor padrão é cinza. Normalmente, o texto adicional é um endereço.
prediction-item-match
A parte da previsão retornada que corresponde à entrada do usuário. Por padrão, esse texto correspondido é destacado com texto em negrito. O texto relacionado pode estar em qualquer lugar em prediction-item. Ele não necessariamente faz parte de prediction-item-main-text.
prediction-item-selected
O item para o qual a pessoa navega usando o teclado. Observação: os itens selecionados serão afetados pelos estilos desta parte e também pelos estilos da parte prediction-item.
prediction-list
O elemento visual contendo a lista de previsões retornadas pelo serviço Place Autocomplete. Ela aparece como uma lista suspensa abaixo do PlaceAutocompleteElement.
background-color
Substitui a cor do plano de fundo do elemento.
border
Substitui a borda do elemento.
border-radius
Substitui o raio da borda do elemento.
color
Substitui a fonte do elemento.
color-scheme
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark.
font
Substitui a fonte do elemento.
font-family
Substitui a fonte do elemento.
font-size
Substitui a fonte do elemento.
font-style
Substitui a fonte do elemento.
font-weight
Substitui a fonte do elemento.
line-height
Substitui a fonte do elemento.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Confira as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-error
function(errorEvent)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado.
gmp-select
function(placePredictionSelectEvent)
Argumentos: 
Esse evento é acionado quando um usuário seleciona uma previsão de lugar. Contém um objeto PlacePrediction que pode ser convertido em um objeto Place.

Interface PlaceAutocompleteElementOptions

Interface google.maps.places.PlaceAutocompleteElementOptions

Opções para criar um PlaceAutocompleteElement. Para ver a descrição de cada propriedade, consulte a propriedade de mesmo nome na classe PlaceAutocompleteElement.

includedPrimaryTypes optional
Tipo:  Array<string> optional
includedRegionCodes optional
Tipo:  Array<string> optional
locationBias optional
Tipo:  LocationBias optional
locationRestriction optional
Tipo:  LocationRestriction optional
name optional
Tipo:  string optional
origin optional
requestedLanguage optional
Tipo:  string optional
requestedRegion optional
Tipo:  string optional
unitSystem optional
Tipo:  UnitSystem optional
value optional
Tipo:  string optional
O valor do elemento de entrada.

Classe PlacePredictionSelectEvent

Classe google.maps.places.PlacePredictionSelectEvent

Esse evento é criado depois que o usuário seleciona um item de previsão com o PlaceAutocompleteElement. Acesse a seleção com event.placePrediction.

Converta placePrediction em um Place chamando PlacePrediction.toPlace.

Essa classe estende Event.

Acesse ligando para const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

placePrediction
Converta em um Place chamando PlacePrediction.toPlace.

Classe BasicPlaceAutocompleteElement

Classe google.maps.places.BasicPlaceAutocompleteElement

BasicPlaceAutocompleteElement é uma subclasse HTMLElement que fornece um componente de interface para a API Places Autocomplete.

Elemento personalizado:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>

Essa classe estende HTMLElement.

Essa classe implementa BasicPlaceAutocompleteElementOptions.

Acesse ligando para const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement(options)
Parâmetros: 
includedPrimaryTypes
Tipo:  Array<string> optional
Tipo de lugar principal incluído (por exemplo, "restaurant" ou "gas_station").

Um lugar só será retornado se o tipo principal dele estiver incluído nessa lista. É possível especificar até cinco valores. Se nenhum tipo for especificado, todos os tipos de lugar serão retornados.
Atributo HTML:
  • <gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>
includedRegionCodes
Tipo:  Array<string> optional
Inclua apenas resultados nas regiões especificadas, que podem ser até 15 códigos de região de dois caracteres do CLDR. Um conjunto vazio não restringe os resultados. Se locationRestriction e includedRegionCodes forem definidos, os resultados vão estar na área de interseção.
Atributo HTML:
  • <gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>
locationBias
Tipo:  LocationBias optional
Um limite flexível ou uma dica para usar ao pesquisar lugares.
locationRestriction
Tipo:  LocationRestriction optional
Limites para restringir os resultados da pesquisa.
name
Tipo:  string optional
O nome a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para mais detalhes. Segue o mesmo comportamento do atributo de nome para entradas. Esse é o nome que será usado quando um formulário for enviado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para mais detalhes.
Atributo HTML:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
A origem para calcular a distância. Se não for especificada, a distância não será calculada. A altitude, se fornecida, não é usada no cálculo.
Atributo HTML:
  • <gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>
requestedLanguage
Tipo:  string optional
Um identificador do idioma em que os resultados devem ser retornados, se possível. Os resultados no idioma selecionado podem receber uma classificação mais alta, mas as sugestões não são restritas a esse idioma. Consulte a lista de idiomas compatíveis.
Atributo HTML:
  • <gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>
requestedRegion
Tipo:  string optional
Um código de região usado para formatação e filtragem de resultados. Ele não restringe as sugestões a esse país. O código de região aceita um valor de dois caracteres de ccTLD ("domínio de nível superior"). A maioria dos códigos ccTLD é idêntica aos códigos ISO 3166-1, com algumas exceções notáveis. Por exemplo, o ccTLD do Reino Unido é "uk" (.co.uk), enquanto o código ISO 3166-1 é "gb" (tecnicamente para a entidade "Reino Unido da Grã-Bretanha e Irlanda do Norte").
Atributo HTML:
  • <gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>
unitSystem
Tipo:  UnitSystem optional
O sistema de unidades usado para mostrar distâncias. Se não for especificado, o sistema de unidades será determinado por requestedRegion.
Atributo HTML:
  • <gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>
prediction-item-icon
Esse slot aceita exatamente um elemento <template> para renderizar como o ícone mostrado ao lado do item de previsão.
input
O elemento de entrada para o elemento de preenchimento automático.
prediction-item
Um item no menu suspenso de previsões que representa uma única previsão.
prediction-item-icon
O ícone exibido à esquerda de cada item na lista de previsões.
prediction-item-main-text
Uma parte do prediction-item que é o texto principal da previsão. Para localizações geográficas, este item contém o nome de um lugar, como "São Paulo", ou o nome de uma rua e o número, como 'Avenida Paulista, 2013'. Por padrão, o prediction-item-main-text fica em preto. Qualquer outro texto no prediction-item vai estar fora de prediction-item-main-text e herdar o estilo de prediction-item. A cor padrão é cinza. Normalmente, o texto adicional é um endereço.
prediction-item-match
A parte da previsão retornada que corresponde à entrada do usuário. Por padrão, esse texto correspondido é destacado com texto em negrito. O texto relacionado pode estar em qualquer lugar em prediction-item. Ele não necessariamente faz parte de prediction-item-main-text.
prediction-item-selected
O item para o qual a pessoa navega usando o teclado. Observação: os itens selecionados serão afetados pelos estilos desta parte e também pelos estilos da parte prediction-item.
prediction-list
O elemento visual contendo a lista de previsões retornadas pelo serviço Place Autocomplete. Ela aparece como uma lista suspensa abaixo do PlaceAutocompleteElement.
background-color
Substitui a cor do plano de fundo do elemento.
border
Substitui a borda do elemento.
border-radius
Substitui o raio da borda do elemento.
color
Substitui a fonte do elemento.
color-scheme
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark.
font
Substitui a fonte do elemento.
font-family
Substitui a fonte do elemento.
font-size
Substitui a fonte do elemento.
font-style
Substitui a fonte do elemento.
font-weight
Substitui a fonte do elemento.
line-height
Substitui a fonte do elemento.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-error
function(errorEvent)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado.
gmp-select
function(placeSelectEvent)
Argumentos: 
Esse evento é acionado quando um usuário seleciona uma previsão de lugar. Contém um objeto Place.

Interface BasicPlaceAutocompleteElementOptions

Interface google.maps.places.BasicPlaceAutocompleteElementOptions

Opções para criar um BasicPlaceAutocompleteElement.

includedPrimaryTypes optional
Tipo:  Array<string> optional
includedRegionCodes optional
Tipo:  Array<string> optional
locationBias optional
Tipo:  LocationBias optional
locationRestriction optional
Tipo:  LocationRestriction optional
name optional
Tipo:  string optional
origin optional
requestedLanguage optional
Tipo:  string optional
requestedRegion optional
Tipo:  string optional
unitSystem optional
Tipo:  UnitSystem optional

Classe PlaceDetailsElement

Classe google.maps.places.PlaceDetailsElement

Mostra detalhes de um lugar em um layout completo. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.

Exemplo:

 <gmp-place-details>
  <gmp-place-details-place-request
    place="PLACE_ID"
  ></gmp-place-details-place-request>
  <gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
  </gmp-place-content-config>
</gmp-place-details>

Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.

Elemento personalizado:
<gmp-place-details></gmp-place-details>

Essa classe estende HTMLElement.

Essa classe implementa PlaceDetailsElementOptions.

Acesse ligando para const {PlaceDetailsElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceDetailsElement
PlaceDetailsElement([options])
Parâmetros: 
place
Tipo:  Place optional
Somente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento.
--gmp-button-border-color
Cor da borda do botão "Abrir no Maps".
--gmp-button-border-radius
Raio da borda do botão "Abrir no Maps".
--gmp-button-border-width
Largura da borda do botão "Abrir no Maps".
--gmp-collage-border-radius-outer
Raio da borda dos cantos externos da colagem de mídia.
--gmp-dialog-border-radius
Raio da borda da caixa de diálogo de declaração do Google Maps.
--gmp-mat-color-disabled-surface
Cor de superfície destinada a transmitir estados desativados ou ausência. Usado para estrelas de avaliação vazias.
--gmp-mat-color-info
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de cadeira de rodas.
--gmp-mat-color-negative
Cor dos elementos da interface com sentimento negativo. Usado para o texto "Fechado" no status "Aberto agora".
--gmp-mat-color-neutral-container
Cor do contêiner para elementos neutros preenchidos da interface. Usado para marcadores de imagem e selo de data de publicação da avaliação.
--gmp-mat-color-on-neutral-container
Cor do texto e dos ícones em relação à cor neutra do contêiner. Usado para o selo de data de publicação da avaliação e o selo de disponibilidade do carregador de VE quando indisponível.
--gmp-mat-color-on-positive-container
Cor dos textos e ícones em contraste com a cor do contêiner positivo. Usado para o selo de disponibilidade do carregador de VE, quando disponível.
--gmp-mat-color-on-secondary-container
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usado para texto e ícones no botão "Abrir no Maps".
--gmp-mat-color-on-surface
Cor para texto e ícones em qualquer cor de superfície. Usado para texto normal.
--gmp-mat-color-on-surface-variant
Cor de menor destaque para texto e ícones em qualquer cor de superfície. Usado para texto com menos ênfase.
--gmp-mat-color-outline-decorative
Cor do contorno de elementos não interativos. Usado para a borda do elemento.
--gmp-mat-color-positive
Cor dos elementos da interface com sentimento positivo. Usado para o texto "Aberto" no status "Aberto agora".
--gmp-mat-color-positive-container
Cor do contêiner para elementos da interface que transmitem um sentimento positivo. Usado para o selo de disponibilidade do carregador de VE, quando disponível.
--gmp-mat-color-primary
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para contagem de avaliações, links na caixa de diálogo de declarações do Google Maps, link do site, ícones na guia Visão Geral e (cor do texto / foco / ao passar o cursor) nos títulos da barra de guias.
--gmp-mat-color-secondary-container
Cor de preenchimento menos proeminente em relação à superfície, para componentes recessivos, como botões tonais. Usado para o plano de fundo do botão "Abrir no Maps".
--gmp-mat-color-surface
Cor para planos de fundo. Usada para os planos de fundo do elemento e da caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-body-medium
Usado para o endereço, a classificação, o tipo, o preço, o status de aberto agora, o horário de funcionamento, a avaliação, o número de telefone, o site, o Plus Code, os principais recursos e o corpo do texto na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-body-small
Usado para o corpo do texto na lista de recursos da guia "Sobre".
--gmp-mat-font-display-small
Usado para o nome do lugar e o texto de cada título de recurso na guia "Sobre".
--gmp-mat-font-family
Família de fontes base usada para todo o texto.
--gmp-mat-font-headline-medium
Usado para o texto do título na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-label-large
Usado para os títulos das guias, o botão "Abrir no Maps", o texto de atribuição do avaliador na galeria de fotos, o texto de atribuição do avaliador na seção de avaliações e os links na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-label-medium
Usado para o selo de contagem de fotos e o selo de data de publicação da avaliação.
--gmp-mat-font-title-small
Usado para o título de cada seção na guia "Sobre".
--gmp-mat-spacing-extra-large
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-extra-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-large
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-medium
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-two-extra-large
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-star-rating-color
Cor das estrelas preenchidas na classificação.
background-color
Substitui a cor do plano de fundo do elemento.
border
Substitui a borda do elemento.
border-radius
Substitui o raio da borda do elemento.
color-scheme
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark.
font-size
Dimensiona todo o texto e os ícones no elemento, que são definidos internamente em ems. O valor padrão é 16px.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-error
function(event)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado.
gmp-load
function(event)
Argumentos: 
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado.

Interface PlaceDetailsElementOptions

Interface google.maps.places.PlaceDetailsElementOptions

Opções para PlaceDetailsElement.

Classe PlaceDetailsCompactElement

Classe google.maps.places.PlaceDetailsCompactElement

Mostra detalhes de um lugar em um layout compacto. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.

Exemplo:

 <gmp-place-details-compact>
  <gmp-place-details-place-request
    place="PLACE_ID"
  ></gmp-place-details-place-request>
  <gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
  </gmp-place-content-config>
</gmp-place-details-compact>

Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.

Elemento personalizado:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>

Essa classe estende HTMLElement.

Essa classe implementa PlaceDetailsCompactElementOptions.

Acesse ligando para const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
Parâmetros: 
orientation
Tipo:  PlaceDetailsOrientation optional
Padrão: PlaceDetailsOrientation.VERTICAL
A variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML:
  • <gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
  • <gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>
place
Tipo:  Place optional
Somente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento.
truncationPreferred
Tipo:  boolean
Padrão: false
Se for verdadeiro, o nome e o endereço do lugar serão truncados para caber em uma linha, em vez de serem quebrados.
Atributo HTML:
  • <gmp-place-details-compact truncation-preferred></gmp-place-details-compact>
--gmp-button-border-color
Cor da borda do botão "Abrir no Maps".
--gmp-button-border-radius
Raio da borda do botão "Abrir no Maps".
--gmp-button-border-width
Largura da borda do botão "Abrir no Maps".
--gmp-dialog-border-radius
Raio da borda da caixa de diálogo de declaração do Google Maps.
--gmp-mat-color-info
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de cadeira de rodas.
--gmp-mat-color-negative
Cor dos elementos da interface com sentimento negativo. Usado para o texto "Fechado" no status "Aberto agora".
--gmp-mat-color-neutral-container
Cor do contêiner para elementos neutros preenchidos da interface. Usado para marcadores de posição de imagem.
--gmp-mat-color-on-secondary-container
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usado para texto e ícones no botão "Abrir no Maps".
--gmp-mat-color-on-surface
Cor para texto e ícones em qualquer cor de superfície. Usado para texto normal.
--gmp-mat-color-on-surface-variant
Cor de menor destaque para texto e ícones em qualquer cor de superfície. Usado para texto com menos ênfase.
--gmp-mat-color-outline-decorative
Cor do contorno de elementos não interativos. Usado para a borda do elemento.
--gmp-mat-color-positive
Cor dos elementos da interface com sentimento positivo. Usado para o texto "Aberto" no status "Aberto agora".
--gmp-mat-color-primary
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para a contagem de avaliações, bem como para links na caixa de diálogo de declarações do Google Maps.
--gmp-mat-color-secondary-container
Cor de preenchimento menos proeminente em relação à superfície, para componentes recessivos, como botões tonais. Usado para o plano de fundo do botão "Abrir no Maps".
--gmp-mat-color-surface
Cor para planos de fundo. Usada para os planos de fundo do elemento e da caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-body-medium
Usado para o corpo do texto na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-body-small
Usado para o endereço, a classificação, o tipo, o preço e o status de funcionamento do lugar.
--gmp-mat-font-family
Família de fontes base usada para todo o texto.
--gmp-mat-font-headline-medium
Usado para o texto do título na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-label-large
Usado para o botão "Abrir no Maps", bem como para links na caixa de diálogo de declarações do Google Maps e no texto de atribuição do avaliador na galeria de fotos.
--gmp-mat-font-label-medium
Usado para o selo de contagem de fotos.
--gmp-mat-font-title-small
Usado para o nome do lugar.
--gmp-mat-spacing-extra-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-large
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-medium
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-star-rating-color
Cor das estrelas preenchidas na classificação.
--gmp-thumbnail-border-radius
Raio da borda da imagem em miniatura do lugar.
background-color
Substitui a cor do plano de fundo do elemento.
border
Substitui a borda do elemento.
border-radius
Substitui o raio da borda do elemento.
color-scheme
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark.
font-size
Dimensiona todo o texto e os ícones no elemento, que são definidos internamente em ems. O valor padrão é 16px.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-error
function(event)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado.
gmp-load
function(event)
Argumentos: 
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado.

PlaceDetailsCompactElementOptions

Interface google.maps.places.PlaceDetailsCompactElementOptions

Opções para PlaceDetailsCompactElement.

orientation optional
Tipo:  PlaceDetailsOrientation optional
truncationPreferred optional
Tipo:  boolean optional

Constantes de PlaceDetailsOrientation

Constantes google.maps.places.PlaceDetailsOrientation

Variantes de orientação para PlaceDetailsCompactElement.

Acesse ligando para const {PlaceDetailsOrientation} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

HORIZONTAL Orientação horizontal.
VERTICAL Orientação vertical.

Classe PlaceDetailsPlaceRequestElement

Classe google.maps.places.PlaceDetailsPlaceRequestElement

Configura um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados com base em um objeto, ID ou nome de recurso de lugar. Anexe esse elemento como filho de um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados do lugar especificado. Exemplo:

 <gmp-place-details>
  <gmp-place-details-place-request
    place="PLACE_ID"
  ></gmp-place-details-place-request>
</gmp-place-details>

Elemento personalizado:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>

Essa classe estende HTMLElement.

Essa classe implementa PlaceDetailsPlaceRequestElementOptions.

Acesse ligando para const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
Parâmetros: 
place
Tipo:  Place optional
Padrão: null
O objeto, ID ou nome do recurso do lugar para renderizar detalhes no elemento Place Details Compact. Essa propriedade reflete o atributo como um nome de recurso.
Atributo HTML:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceDetailsPlaceRequestElementOptions

Interface google.maps.places.PlaceDetailsPlaceRequestElementOptions

Opções para PlaceDetailsPlaceRequestElement.

place optional
Tipo:  Place|string optional

Classe PlaceDetailsLocationRequestElement

Classe google.maps.places.PlaceDetailsLocationRequestElement

Configura um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados com base em um local. Anexe esse elemento como filho de um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados do local especificado. Exemplo:

 <gmp-place-details>
  <gmp-place-details-location-request
    location="37.6207665,-122.4284806"
  ></gmp-place-details-location-request>
</gmp-place-details>

Elemento personalizado:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>

Essa classe estende HTMLElement.

Essa classe implementa PlaceDetailsLocationRequestElementOptions.

Acesse ligando para const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
Parâmetros: 
location
Padrão: null
O local para renderizar detalhes no elemento Place Details. Normaliza para um LatLngAltitude.
Atributo HTML:
  • <gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceDetailsLocationRequestElementOptions

Interface google.maps.places.PlaceDetailsLocationRequestElementOptions

Opções para PlaceDetailsLocationRequestElement.

location optional
O local para renderizar o lugar.

Classe PlaceSearchElement

Classe google.maps.places.PlaceSearchElement

Mostra os resultados de uma Place Search em uma lista. Anexe um PlaceTextSearchRequestElement ou PlaceNearbySearchRequestElement para especificar a solicitação para renderizar os resultados. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.

Exemplo:

 <gmp-place-search>
  <gmp-place-text-search-request
    text-query="QUERY"
  ></gmp-place-text-search-request>
  <gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
  </gmp-place-content-config>
</gmp-place-search>

Para usar o elemento Place Search, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.

Elemento personalizado:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

Essa classe estende HTMLElement.

Essa classe implementa PlaceSearchElementOptions.

Acesse ligando para const {PlaceSearchElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceSearchElement
PlaceSearchElement([options])
Parâmetros: 
attributionPosition
Padrão: PlaceSearchAttributionPosition.TOP
A posição do logotipo de atribuição e do botão de declaração legal.
Atributo HTML:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
Tipo:  PlaceSearchOrientation optional
Padrão: PlaceSearchOrientation.VERTICAL
A variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML:
  • <gmp-place-search orientation="vertical"></gmp-place-search>
  • <gmp-place-search orientation="horizontal"></gmp-place-search>
places
Tipo:  Array<Place>
Somente leitura. Matriz de objetos Place que contém os IDs, os locais e as janelas de visualização dos lugares renderizados no momento.
selectable
Tipo:  boolean optional
Padrão: false
Se os itens da lista podem ser selecionados ou não. Se for verdadeiro, os itens da lista serão botões que vão enviar o evento gmp-select quando clicados. A navegação e a seleção acessíveis pelo teclado também são compatíveis.
Atributo HTML:
  • <gmp-place-search selectable></gmp-place-search>
truncationPreferred
Tipo:  boolean optional
Padrão: false
Se for verdadeiro, trunca determinadas linhas de conteúdo para que caibam em uma linha, em vez de serem quebradas.
Atributo HTML:
  • <gmp-place-search truncation-preferred></gmp-place-search>
--gmp-button-border-color
Cor da borda do botão "Abrir no Maps".
--gmp-button-border-radius
Raio da borda do botão "Abrir no Maps".
--gmp-button-border-width
Largura da borda do botão "Abrir no Maps".
--gmp-card-border-radius
Raio da borda dos cards de lugar.
--gmp-dialog-border-radius
Raio da borda da caixa de diálogo de declaração do Google Maps.
--gmp-mat-color-info
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de entrada acessível.
--gmp-mat-color-negative
Cor dos elementos da interface com sentimento negativo. Usado para o rótulo "Fechado" no horário de funcionamento de um lugar.
--gmp-mat-color-neutral-container
Cor do contêiner para elementos neutros preenchidos da interface. Usado para selos de data de avaliação e formas de marcador de posição de carregamento.
--gmp-mat-color-on-neutral-container
Cor do texto e dos ícones em um contêiner neutro. Usado para o texto da data da avaliação e o texto do erro de carregamento.
--gmp-mat-color-on-secondary-container
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usada para texto e ícones de botões.
--gmp-mat-color-on-surface
Cor para texto e ícones em uma cor de superfície. Usado para títulos e conteúdo de caixas de diálogo.
--gmp-mat-color-on-surface-variant
Cor de menor destaque para texto e ícones em uma cor de superfície. Usado para informações sobre lugares.
--gmp-mat-color-outline-decorative
Cor do contorno de elementos não interativos. Usado para a borda do contêiner.
--gmp-mat-color-positive
Cor dos elementos da interface com sentimento positivo. Usado para o rótulo "Aberto" no horário de funcionamento de um lugar.
--gmp-mat-color-primary
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para links, indicador de carregamento e ícones de visão geral.
--gmp-mat-color-secondary-container
Cor de preenchimento menos proeminente em relação a uma superfície. Usado para planos de fundo de botões.
--gmp-mat-color-surface
Cor para planos de fundo. Usado para planos de fundo de contêineres e caixas de diálogo.
--gmp-mat-font-body-small
Usado para informações sobre lugares.
--gmp-mat-font-family
Família de fontes base para todo o texto.
--gmp-mat-font-headline-medium
Usado para títulos de caixas de diálogo.
--gmp-mat-font-label-large
Usado para o conteúdo do botão.
--gmp-mat-font-title-medium
Usado para o nome do lugar.
--gmp-mat-spacing-extra-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-large
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-medium
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-mat-spacing-small
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto.
--gmp-star-rating-color
Cor das estrelas preenchidas em uma classificação por estrelas.
--gmp-thumbnail-border-radius
Raio da borda da imagem em miniatura do lugar.
background-color
Substitui a cor do plano de fundo do elemento.
border
Substitui a borda do elemento.
border-radius
Substitui o raio da borda do elemento.
color-scheme
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark.
font-size
Dimensiona todo o texto e os ícones no elemento. O valor padrão é 16px.
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.
gmp-error
function(event)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado.
gmp-load
function(event)
Argumentos: 
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado.
gmp-select
function(event)
Argumentos: 
Esse evento é acionado quando um lugar é selecionado na lista. Contém um objeto Place com o ID, o local e a janela de visualização do lugar selecionado.

Interface PlaceSearchElementOptions

Interface google.maps.places.PlaceSearchElementOptions

Opções para PlaceSearchElement.

attributionPosition optional
orientation optional
Tipo:  PlaceSearchOrientation optional
selectable optional
Tipo:  boolean optional
truncationPreferred optional
Tipo:  boolean optional

Constantes de PlaceSearchAttributionPosition

Constantes google.maps.places.PlaceSearchAttributionPosition

Posições de atribuição para PlaceSearchElement.

Acesse ligando para const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

BOTTOM Atribuição na parte de baixo do PlaceSearchElement
TOP Atribuição na parte de cima do PlaceSearchElement

Constantes de PlaceSearchOrientation

Constantes google.maps.places.PlaceSearchOrientation

Variantes de orientação para PlaceSearchElement.

Acesse ligando para const {PlaceSearchOrientation} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

HORIZONTAL Orientação horizontal.
VERTICAL Orientação vertical.

Classe PlaceSelectEvent

Classe google.maps.places.PlaceSelectEvent

Esse evento é disparado quando um lugar é selecionado em uma lista. Acesse a seleção com event.place.

Essa classe estende Event.

Acesse ligando para const {PlaceSelectEvent} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

place
Tipo:  Place
O lugar selecionado.

Classe PlaceNearbySearchRequestElement

Classe google.maps.places.PlaceNearbySearchRequestElement

Configura um PlaceSearchElement para carregar resultados com base em uma solicitação do Nearby Search. A propriedade locationRestriction é obrigatória para que o elemento de pesquisa seja carregado. Todas as outras propriedades configuradas serão ignoradas se locationRestriction não estiver definido. Anexe esse elemento como filho de um PlaceSearchElement para carregar os resultados. Exemplo:

 <gmp-place-search>
  <gmp-place-nearby-search-request
    location-restriction="RADIUS@LAT,LNG"
  ></gmp-place-nearby-search-request>
  <gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
  </gmp-place-content-config>
</gmp-place-search>

Elemento personalizado:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>

Essa classe estende HTMLElement.

Essa classe implementa PlaceNearbySearchRequestElementOptions.

Acesse ligando para const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
Parâmetros: 
excludedPrimaryTypes
Tipo:  Array<string> optional
Padrão: null
Tipos de lugares principais excluídos.
Atributo HTML:
  • <gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>
excludedTypes
Tipo:  Array<string> optional
Padrão: null
Tipos de lugar excluídos.
Atributo HTML:
  • <gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>
includedPrimaryTypes
Tipo:  Array<string> optional
Padrão: null
Tipo de lugar principal incluído.
Atributo HTML:
  • <gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>
includedTypes
Tipo:  Array<string> optional
Padrão: null
Tipo de lugar incluído.
Atributo HTML:
  • <gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>
locationRestriction
Tipo:  Circle|CircleLiteral optional
Padrão: null
A região a ser pesquisada. Normaliza para um Circle.
Atributo HTML:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
Tipo:  number optional
Padrão: null
Número máximo de resultados a serem retornados.
Atributo HTML:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
Padrão: null
Como os resultados serão classificados na resposta.
Atributo HTML:
  • <gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceNearbySearchRequestElementOptions

Interface google.maps.places.PlaceNearbySearchRequestElementOptions

Opções para PlaceNearbySearchRequestElement.

excludedPrimaryTypes optional
Tipo:  Array<string> optional
Tipos de lugares principais excluídos. Consulte PlaceNearbySearchRequestElement.excludedPrimaryTypes e SearchNearbyRequest.excludedPrimaryTypes para mais detalhes.
excludedTypes optional
Tipo:  Array<string> optional
Tipos de lugar excluídos. Consulte PlaceNearbySearchRequestElement.excludedTypes e SearchNearbyRequest.excludedTypes para mais detalhes.
includedPrimaryTypes optional
Tipo:  Array<string> optional
Tipos de lugar principais incluídos. Consulte PlaceNearbySearchRequestElement.includedPrimaryTypes e SearchNearbyRequest.includedPrimaryTypes para mais detalhes.
includedTypes optional
Tipo:  Array<string> optional
Tipos de lugar incluídos. Consulte PlaceNearbySearchRequestElement.includedTypes e SearchNearbyRequest.includedTypes para mais detalhes.
locationRestriction optional
Tipo:  Circle|CircleLiteral optional
A região a ser pesquisada. Consulte PlaceNearbySearchRequestElement.locationRestriction e SearchNearbyRequest.locationRestriction para mais detalhes.
maxResultCount optional
Tipo:  number optional
Número máximo de resultados a serem retornados. Consulte PlaceNearbySearchRequestElement.maxResultCount e SearchNearbyRequest.maxResultCount para mais detalhes.
rankPreference optional
Como os resultados serão classificados na resposta. Consulte PlaceNearbySearchRequestElement.rankPreference e SearchNearbyRankPreference para mais detalhes.

Classe PlaceTextSearchRequestElement

Classe google.maps.places.PlaceTextSearchRequestElement

Configura um PlaceSearchElement para carregar resultados com base em uma solicitação de Text Search. A propriedade textQuery é obrigatória para que o elemento de pesquisa seja carregado. Todas as outras propriedades configuradas serão ignoradas se textQuery não estiver definido. Anexe esse elemento como filho de um PlaceSearchElement para carregar os resultados. Exemplo:

 <gmp-place-search>
  <gmp-place-text-search-request
    text-query="QUERY"
  ></gmp-place-text-search-request>
  <gmp-place-content-config>
    <gmp-place-media lightbox-preferred></gmp-place-media>
  </gmp-place-content-config>
</gmp-place-search>

Elemento personalizado:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

Essa classe estende HTMLElement.

Essa classe implementa PlaceTextSearchRequestElementOptions.

Acesse ligando para const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceTextSearchRequestElement
PlaceTextSearchRequestElement([options])
Parâmetros: 
evConnectorTypes
Tipo:  Array<EVConnectorType> optional
Padrão: null
A lista de tipos de conector de VE preferidos.
Atributo HTML:
  • <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>
evMinimumChargingRateKw
Tipo:  number optional
Padrão: null
Taxa de carregamento mínima necessária em quilowatts.
Atributo HTML:
  • <gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>
includedType
Tipo:  string optional
Padrão: null
O tipo de lugar solicitado.
Atributo HTML:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
Tipo:  boolean optional
Padrão: null
Usado para restringir a pesquisa a lugares que estão abertos no momento.
Atributo HTML:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
Tipo:  LocationBias optional
Padrão: null
Viés de local para a pesquisa. Normaliza para um LatLngAltitude | LatLngBounds | Circle | string.
Atributo HTML:
  • <gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>
locationRestriction
Padrão: null
Restrição de local para a pesquisa. Normaliza para um LatLngBounds.
Atributo HTML:
  • <gmp-place-text-search-request location-restriction="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
maxResultCount
Tipo:  number optional
Padrão: null
Número máximo de resultados a serem retornados.
Atributo HTML:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
Tipo:  number optional
Padrão: null
Filtra os resultados com uma avaliação média de usuários estritamente menor que esse limite.
Atributo HTML:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
Tipo:  Array<PriceLevel> optional
Padrão: null
Usado para restringir a pesquisa a lugares marcados com determinados níveis de preço.
Atributo HTML:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
Padrão: null
Como os resultados serão classificados na resposta.
Atributo HTML:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
Tipo:  string optional
Padrão: null
A consulta de texto para Text Search.
Atributo HTML:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
Tipo:  boolean optional
Padrão: null
Usado para definir a filtragem de tipo estrita para "includedType".
Atributo HTML:
  • <gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceTextSearchRequestElementOptions

Interface google.maps.places.PlaceTextSearchRequestElementOptions

Opções para PlaceTextSearchRequestElement.

evConnectorTypes optional
Tipo:  Array<EVConnectorType> optional
A lista de tipos de conector de VE preferidos. Consulte SearchByTextRequest.evSearchOptions e PlaceTextSearchRequestElement.evConnectorTypes para mais detalhes.
evMinimumChargingRateKw optional
Tipo:  number optional
Taxa de carregamento mínima necessária em quilowatts. Consulte SearchByTextRequest.evSearchOptions e PlaceTextSearchRequestElement.evMinimumChargingRateKw para mais detalhes.
includedType optional
Tipo:  string optional
O tipo de lugar solicitado. Consulte SearchByTextRequest.includedType e PlaceTextSearchRequestElement.includedType para mais detalhes.
isOpenNow optional
Tipo:  boolean optional
Usado para restringir a pesquisa a lugares que estão abertos no momento. Consulte SearchByTextRequest.isOpenNow e PlaceTextSearchRequestElement.isOpenNow para mais detalhes.
locationBias optional
Tipo:  LocationBias optional
Viés de local para a pesquisa. Consulte SearchByTextRequest.locationBias e PlaceTextSearchRequestElement.locationBias para mais detalhes.
locationRestriction optional
Restrição de local para a pesquisa. Consulte SearchByTextRequest.locationRestriction e PlaceTextSearchRequestElement.locationRestriction para mais detalhes.
maxResultCount optional
Tipo:  number optional
Número máximo de resultados a serem retornados. Consulte SearchByTextRequest.maxResultCount e PlaceTextSearchRequestElement.maxResultCount para mais detalhes.
minRating optional
Tipo:  number optional
Filtra os resultados com uma avaliação média de usuários estritamente menor que esse limite. Consulte SearchByTextRequest.minRating e PlaceTextSearchRequestElement.minRating para mais detalhes.
priceLevels optional
Tipo:  Array<PriceLevel> optional
Usado para restringir a pesquisa a lugares marcados com determinados níveis de preço. Consulte SearchByTextRequest.priceLevels e PlaceTextSearchRequestElement.priceLevels para mais detalhes.
rankPreference optional
Como os resultados serão classificados na resposta. Consulte SearchByTextRequest.rankPreference e PlaceTextSearchRequestElement.rankPreference para mais detalhes.
textQuery optional
Tipo:  string optional
A consulta de texto para Text Search. Consulte SearchByTextRequest.textQuery e PlaceTextSearchRequestElement.textQuery para mais detalhes.
useStrictTypeFiltering optional
Tipo:  boolean optional
Usado para definir a filtragem de tipo estrita para SearchByTextRequest.includedType. Consulte SearchByTextRequest.useStrictTypeFiltering e PlaceTextSearchRequestElement.useStrictTypeFiltering para mais detalhes.

Classe Autocomplete

Classe google.maps.places.Autocomplete

Um widget que fornece previsões de lugares com base na entrada de texto do usuário. Ele se anexa a um elemento de entrada do tipo text e detecta a entrada de texto nesse campo. A lista de previsões é apresentada como uma lista suspensa e é atualizada conforme o texto é inserido.

Essa classe estende MVCObject.

Acesse ligando para const {Autocomplete} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

Autocomplete
Autocomplete(inputField[, opts])
Parâmetros: 
Cria uma nova instância de Autocomplete que se anexa ao campo de texto de entrada especificado com as opções fornecidas.
getBounds
getBounds()
Parâmetros: nenhum
Valor de retorno: LatLngBounds|undefined os limites de polarização.
Retorna os limites para os quais as previsões são tendenciosas.
getFields
getFields()
Parâmetros: nenhum
Valor de retorno:  Array<string>|undefined
Retorna os campos que serão incluídos para o lugar na resposta de detalhes quando eles forem recuperados. Para uma lista de campos, consulte PlaceResult.
getPlace
getPlace()
Parâmetros: nenhum
Valor de retorno: PlaceResult o lugar selecionado pelo usuário.
Retorna os detalhes do lugar selecionado pelo usuário se eles forem recuperados. Caso contrário, retorna um objeto Place de stub, com a propriedade name definida como o valor atual do campo de entrada.
setBounds
setBounds(bounds)
Parâmetros: 
Valor de retorno: nenhum
Define a área preferencial para retornar resultados de lugares. Os resultados são direcionados, mas não restritos, a essa área.
setComponentRestrictions
setComponentRestrictions(restrictions)
Parâmetros: 
Valor de retorno: nenhum
Define as restrições do componente. As restrições de componente são usadas para limitar as previsões apenas àquelas dentro do componente pai. Por exemplo, o país.
setFields
setFields(fields)
Parâmetros: 
  • fields:  Array<string> optional
Valor de retorno: nenhum
Define os campos a serem incluídos para o lugar na resposta de detalhes quando eles forem recuperados. Para uma lista de campos, consulte PlaceResult.
setOptions
setOptions(options)
Parâmetros: 
Valor de retorno: nenhum
setTypes
setTypes(types)
Parâmetros: 
  • types:  Array<string> optional os tipos de previsões a serem incluídos.
Valor de retorno: nenhum
Define os tipos de previsões que serão retornados. Para ver os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos os tipos serão retornados.
Herdado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
place_changed
function()
Argumentos:  nenhum
Esse evento é acionado quando um PlaceResult é disponibilizado para um lugar selecionado pelo usuário.
Se o usuário inserir o nome de um lugar que não foi sugerido pelo controle e pressionar a tecla Enter, ou se uma solicitação do Place Details falhar, o PlaceResult vai conter a entrada do usuário na propriedade name, sem outras propriedades definidas.

AutocompleteOptions

Interface google.maps.places.AutocompleteOptions

As opções que podem ser definidas em um objeto Autocomplete.

bounds optional
A área em que os lugares serão pesquisados.
componentRestrictions optional
Tipo:  ComponentRestrictions optional
As restrições do componente. As restrições de componente são usadas para limitar as previsões apenas àquelas dentro do componente pai. Por exemplo, o país.
fields optional
Tipo:  Array<string> optional
Campos a serem incluídos para o lugar na resposta de detalhes quando os detalhes forem recuperados, que serão cobrados. Se ['ALL'] for transmitido, todos os campos disponíveis vão ser retornados e faturados, o que não é recomendado para implantações de produção. Para uma lista de campos, consulte PlaceResult. Os campos aninhados podem ser especificados com caminhos de ponto (por exemplo, "geometry.location"). O padrão é ['ALL'].
placeIdOnly optional
Tipo:  boolean optional
Se é para recuperar apenas IDs de lugar. O PlaceResult disponibilizado quando o evento place_changed é acionado terá apenas os campos ID de lugar, types e name, com o ID de lugar, types e description retornados pelo serviço Autocomplete. Essa configuração está desativada por padrão.
strictBounds optional
Tipo:  boolean optional
Um valor booleano que indica que o widget do Autocomplete deve retornar apenas os lugares que estão dentro dos limites dele no momento em que a consulta é enviada. Definir strictBounds como false (que é o padrão) vai fazer com que os resultados sejam direcionados, mas não restritos, a lugares contidos nos limites.
types optional
Tipo:  Array<string> optional
Os tipos de previsões que serão retornados. Para ver os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos os tipos serão retornados.

Classe google.maps.places.SearchBox

Um widget que fornece previsões de consulta com base na entrada de texto de um usuário. Ele se anexa a um elemento de entrada do tipo text e detecta a entrada de texto nesse campo. A lista de previsões é apresentada como uma lista suspensa e é atualizada conforme o texto é inserido.

Essa classe estende MVCObject.

Acesse ligando para const {SearchBox} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

SearchBox
SearchBox(inputField[, opts])
Parâmetros: 
Cria uma nova instância de SearchBox que se anexa ao campo de texto de entrada especificado com as opções fornecidas.
getBounds
getBounds()
Parâmetros: nenhum
Valor de retorno:  LatLngBounds|undefined
Retorna os limites que influenciam as previsões de consulta.
getPlaces
getPlaces()
Parâmetros: nenhum
Valor de retorno:  Array<PlaceResult>|undefined
Retorna a consulta selecionada pelo usuário para ser usada com o evento places_changed.
setBounds
setBounds(bounds)
Parâmetros: 
Valor de retorno: nenhum
Define a região a ser usada para influenciar as previsões de consulta. Os resultados serão direcionados para essa área, mas não serão totalmente restritos a ela.
Herdado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
Argumentos:  nenhum
Esse evento é acionado quando o usuário seleciona uma consulta. getPlaces deve ser usado para receber novos lugares.

Interface SearchBoxOptions

Interface google.maps.places.SearchBoxOptions

As opções que podem ser definidas em um objeto SearchBox.

bounds optional
A área para a qual as previsões de consulta serão direcionadas. As previsões são direcionadas, mas não restritas, a consultas que segmentam esses limites.

Classe PlaceContextualElement

Classe google.maps.places.PlaceContextualElement

Um widget que usa o token de contexto para mostrar uma visualização contextual da resposta do embasamento com o Google Maps.

Elemento personalizado:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

Essa classe estende HTMLElement.

Essa classe implementa PlaceContextualElementOptions.

Acesse ligando para const {PlaceContextualElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceContextualElement
PlaceContextualElement([options])
Parâmetros: 
contextToken
Tipo:  string optional
O token de contexto.
Atributo HTML:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceContextualElementOptions

Interface google.maps.places.PlaceContextualElementOptions

Opções para PlaceContextualElement.

contextToken optional
Tipo:  string optional
O token de contexto fornecido pela resposta do embasamento com o Google Maps.

Classe PlaceContextualListConfigElement

Classe google.maps.places.PlaceContextualListConfigElement

Um elemento HTML que configura as opções para a visualização em lista do elemento contextual de lugar.

Elemento personalizado:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>

Essa classe estende HTMLElement.

Essa classe implementa PlaceContextualListConfigElementOptions.

Acesse ligando para const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
Parâmetros: 
layout
Tipo:  PlaceContextualListLayout optional
O layout.
Atributo HTML:
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
Tipo:  boolean optional
Se o mapa está oculto.
Atributo HTML:
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
addEventListener
addEventListener(type, listener[, options])
Parâmetros: 
  • type:  string uma string que diferencia maiúsculas de minúsculas e representa o tipo de evento a ser detectado.
  • listener:  EventListener|EventListenerObject o objeto que recebe uma notificação. Precisa ser uma função ou um objeto com o método handleEvent.
  • options:  boolean|AddEventListenerOptions optional consulte as opções. Os eventos personalizados só aceitam capture e passive.
Valor de retorno:  void
Configura uma função que será chamada sempre que o evento especificado for entregue ao destino. Consulte addEventListener.
removeEventListener
removeEventListener(type, listener[, options])
Parâmetros: 
  • type:  string Uma string que especifica o tipo de evento para o qual um listener de eventos será removido.
  • listener:  EventListener|EventListenerObject o listener de eventos do manipulador de eventos a ser removido do destino do evento.
  • options:  boolean|EventListenerOptions optional consulte as opções.
Valor de retorno:  void
Remove do destino um listener de eventos registrado anteriormente com addEventListener. Consulte removeEventListener.

Interface PlaceContextualListConfigElementOptions

Interface google.maps.places.PlaceContextualListConfigElementOptions

Opções para PlaceContextualListConfigElement.

layout optional
Tipo:  PlaceContextualListLayout optional
O layout.
mapHidden optional
Tipo:  boolean optional
Padrão: false
Verdadeiro se o mapa precisar ser ocultado.

Constantes de PlaceContextualListLayout

Constantes google.maps.places.PlaceContextualListLayout

A lista de layouts que o elemento contextual de lugar aceita para a visualização em lista.

Acesse ligando para const {PlaceContextualListLayout} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.

COMPACT Layout de lista compacta: os itens da lista são renderizados como links em uma única linha, com estouros em uma lista suspensa.
VERTICAL Layout de lista vertical: os itens são renderizados como cards em uma lista vertical.