Places Widgets

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
Incluído o Tipo de lugar principal (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
Inclui 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 estiverem 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 ou dica flexível a ser usado 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 (link em inglês) para mais detalhes. Segue o mesmo comportamento do atributo "name" 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 (link em inglês) para mais detalhes.
Atributo HTML:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
A origem de onde 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 regional aceita um valor de dois caracteres 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.
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 item de previsão 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 texto principal do item de previsão é preto. Se houver outro texto no prediction-item, ele 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 correspondente pode estar em qualquer lugar em prediction-item. Ele não necessariamente faz parte de prediction-item-main-text.
prediction-item-selected
O item quando o usuário navega até ele usando o teclado. Observação: os itens selecionados serão afetados por esses estilos de parte e também pelos estilos de parte do item de previsão.
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 de 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.
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 opções. Os eventos personalizados só são compatíveis com 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 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 é disparado 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 construir 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 PlaceAutocompleteElement

Classe google.maps.places.PlaceAutocompleteElement

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

PlaceAutocompleteElement usa automaticamente 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 as sessões 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
Incluído o Tipo de lugar principal (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
Inclui 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 estiverem 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 ou dica flexível a ser usado 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 (link em inglês) para mais detalhes. Segue o mesmo comportamento do atributo "name" 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 (link em inglês) para mais detalhes.
Atributo HTML:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
A origem de onde 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>
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 regional aceita um valor de dois caracteres 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>
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 item de previsão 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 texto principal do item de previsão é preto. Se houver outro texto no prediction-item, ele 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 correspondente pode estar em qualquer lugar em prediction-item. Ele não necessariamente faz parte de prediction-item-main-text.
prediction-item-selected
O item quando o usuário navega até ele usando o teclado. Observação: os itens selecionados serão afetados por esses estilos de parte e também pelos estilos de parte do item de previsão.
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 de 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.
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 opções. Os eventos personalizados só são compatíveis com 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 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 é disparado 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 construir um PlaceAutocompleteElement. Para a descrição de cada propriedade, consulte a propriedade com o 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

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 isso em um Place chamando PlacePrediction.toPlace.

Classe PlaceAutocompleteRequestErrorEvent

Classe google.maps.places.PlaceAutocompleteRequestErrorEvent

Esse evento é emitido pelo PlaceAutocompleteElement quando há um problema com a solicitação de rede.

Essa classe estende Event.

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

Classe PlaceContextualElement

Classe google.maps.places.PlaceContextualElement

Um widget que usa o token de contexto para mostrar uma visualização contextual da resposta de 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 opções. Os eventos personalizados só são compatíveis com 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 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 de 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 opções para a visualização de lista do elemento contextual de lugar.

Elemento personalizado:
<gmp-place-contextual-list-config layout="compact" map-hidden map-mode="none"></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
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>
mapMode
O modo de mapa usado no elemento contextual de lugar para uma lista de lugares.
Atributo HTML:
  • <gmp-place-contextual-list-config map-mode="none"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config map-mode="roadmap"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config map-mode="hybrid"></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 opções. Os eventos personalizados só são compatíveis com 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 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
Padrão:PlaceContextualListLayout.VERTICAL
O layout.
mapHidden optional
Tipo:boolean optional
Padrão:false
Verdadeiro se o mapa precisar ser ocultado.
mapMode optional
Padrão:PlaceContextualListMapMode.ROADMAP
O modo de mapa usado no elemento contextual de lugar para uma lista de lugares.

Constantes PlaceContextualListLayout

Constantes de google.maps.places.PlaceContextualListLayout

A lista de layouts que o elemento contextual de lugar oferece suporte 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 são renderizados como links em uma única linha, com estouros em uma lista suspensa.
VERTICAL Layout de lista vertical: os itens da lista são renderizados como cards em uma lista vertical.

Constantes PlaceContextualListMapMode

Constantes de google.maps.places.PlaceContextualListMapMode

O modo de mapa usado no elemento contextual de lugar para uma lista de lugares.

Acesse ligando para const {PlaceContextualListMapMode} = await google.maps.importLibrary("places").
Consulte Bibliotecas na API Maps JavaScript.
HYBRID Uma camada transparente de ruas principais em imagens de satélite ou fotorrealistas em 3D.
NONE Sem mapa.
ROADMAP Um mapa de ruas 2D normal.

Classe PlaceDetailsElement

Classe google.maps.places.PlaceDetailsElement

Mostra detalhes de um lugar em um layout completo. Adicione um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Adicione 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 Places UI Kit no 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 de lugar que contém o ID, a localização 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 divulgação do Google Maps.
--gmp-mat-color-disabled-surface
Cor da superfície destinada a transmitir estados desativados ou não presença. 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 de interface preenchidos neutros. Usado para marcadores de posição 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ículo elétrico quando indisponível.
--gmp-mat-color-on-positive-container
Cor dos textos e ícones em relação à 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 relação à 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 ênfase para texto e ícones em qualquer cor de superfície. Usado para texto menos enfatizado.
--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 "Abrir" 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 (passar o cursor / foco / cor do texto) 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. Usado para os planos de fundo do elemento e da caixa de diálogo de divulgações do Google Maps.
--gmp-mat-font-body-medium
Usado para o endereço, a classificação, o tipo, o preço, o status "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 texto do corpo na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-body-small
Usado para o texto do corpo 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 básica usada em todo o texto.
--gmp-mat-font-headline-medium
Usado para texto de cabeçalho 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 e na seção de avaliações, além de 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 de 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 opções. Os eventos personalizados só são compatíveis com 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 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 é disparado 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 de PlaceDetailsElement.

Classe PlaceDetailsCompactElement

Classe google.maps.places.PlaceDetailsCompactElement

Mostra detalhes de um lugar em um layout compacto. Adicione um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Adicione 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 Places UI Kit no 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
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 de lugar que contém o ID, a localização e a janela de visualização do lugar renderizado no momento.
truncationPreferred
Tipo:boolean
Padrão:false
Se for verdadeiro, trunca o nome e o endereço do lugar para caber em uma linha em vez de quebrar.
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 divulgaçã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 de interface preenchidos neutros. Usado para marcadores de posição de imagem.
--gmp-mat-color-on-secondary-container
Cor do texto e dos ícones em relação à 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 ênfase para texto e ícones em qualquer cor de superfície. Usado para texto menos enfatizado.
--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 "Abrir" no status "Aberto agora".
--gmp-mat-color-primary
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para contagem de avaliações e 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. Usado para os planos de fundo do elemento e da caixa de diálogo de divulgações do Google Maps.
--gmp-mat-font-body-medium
Usado para o texto do corpo 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 aberto agora do lugar.
--gmp-mat-font-family
Família de fontes básica usada em todo o texto.
--gmp-mat-font-headline-medium
Usado para texto de cabeçalho na caixa de diálogo de declarações do Google Maps.
--gmp-mat-font-label-large
Usado no botão "Abrir no Maps", bem como nos links na caixa de diálogo de declarações do Google Maps e no texto de atribuição do revisor 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 de 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 opções. Os eventos personalizados só são compatíveis com 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 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 é disparado 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 PlaceDetailsCompactElementOptions

Interface google.maps.places.PlaceDetailsCompactElementOptions

Opções de PlaceDetailsCompactElement.
orientation optional
Consulte PlaceDetailsCompactElement.orientation.
truncationPreferred optional
Tipo:boolean optional
Consulte PlaceDetailsCompactElement.truncationPreferred.

Constantes PlaceDetailsOrientation

Constantes de 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 de lugar, ID ou nome de recurso. Adicione 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 Compacto de detalhes do lugar. 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 opções. Os eventos personalizados só são compatíveis com 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 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 de PlaceDetailsPlaceRequestElement.
place optional
Tipo:Place|string optional
Ver PlaceDetailsPlaceRequestElement.place

Classe PlaceDetailsLocationRequestElement

Classe google.maps.places.PlaceDetailsLocationRequestElement

Configura um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados com base em um local. Adicione 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 opções. Os eventos personalizados só são compatíveis com 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 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 de PlaceDetailsLocationRequestElement.
location optional
O local para renderizar o lugar.

Classe PlaceSearchElement

Classe google.maps.places.PlaceSearchElement

Mostra os resultados de uma pesquisa de lugar em uma lista. Adicione um PlaceTextSearchRequestElement ou PlaceNearbySearchRequestElement para especificar a solicitação de renderização dos resultados. Adicione 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 de pesquisa de lugar, ative a API Places UI Kit 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 divulgação legal.
Atributo HTML:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
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, locais e viewports dos lugares renderizados no momento.
selectable
Tipo:boolean optional
Padrão:false
Se os itens da lista podem ser selecionados. Se for verdadeiro, os itens da lista serão botões que vão disparar o evento gmp-select quando forem 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 caber em uma linha em vez de quebrar.
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 para cards de lugar.
--gmp-dialog-border-radius
Raio da borda para a caixa de diálogo de divulgaçã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 de interface preenchidos neutros. Usado para selos de data de revisão e carregamento de formas de marcador de posição.
--gmp-mat-color-on-neutral-container
Cor do texto e dos ícones em um contêiner neutro. Usado para texto da data de revisão e texto de erro de carregamento.
--gmp-mat-color-on-secondary-container
Cor do texto e dos ícones em relação à cor de um contêiner secundário. Usado 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 caixa de diálogo.
--gmp-mat-color-on-surface-variant
Cor de menor ênfase para texto e ícones em uma cor de superfície. Usado para informações de lugar.
--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 uma superfície. Usado para planos de fundo de botões.
--gmp-mat-color-surface
Cor para planos de fundo. Usado para contêineres e planos de fundo de caixas de diálogo.
--gmp-mat-font-body-small
Usado para informações de lugar.
--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 conteúdo de 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 para a imagem em miniatura do lugar.
background-color
Substitui a cor de 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 opções. Os eventos personalizados só são compatíveis com 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 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 é disparado 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, a localização e a janela de visualização do lugar selecionado.

Interface PlaceSearchElementOptions

Interface google.maps.places.PlaceSearchElementOptions

Opções de PlaceSearchElement.
attributionPosition optional
Consulte PlaceSearchElement.attributionPosition.
orientation optional
Consulte PlaceSearchElement.orientation.
selectable optional
Tipo:boolean optional
Ver PlaceSearchElement.selectable
truncationPreferred optional
Tipo:boolean optional
Consulte PlaceSearchElement.truncationPreferred.

Constantes PlaceSearchAttributionPosition

Constantes de 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 PlaceSearchOrientation

Constantes de 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 é acionado quando um lugar é selecionado em uma lista de lugares. 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 de pesquisa nas proximidades. 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. Adicione 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
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
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
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
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
Atributo HTML:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
Tipo:number optional
Padrão:null
Atributo HTML:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
Padrão:null
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 opções. Os eventos personalizados só são compatíveis com 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 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 de 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 lugares 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 pesquisa de texto. 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. Adicione 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
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
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
Atributo HTML:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
Tipo:boolean optional
Padrão:null
Atributo HTML:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
Padrão:null
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
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
Atributo HTML:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
Tipo:number optional
Padrão:null
Atributo HTML:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
Tipo:Array<PriceLevel> optional
Padrão:null
Atributo HTML:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
Padrão:null
Atributo HTML:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
Tipo:string optional
Padrão:null
Atributo HTML:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
Tipo:boolean optional
Padrão:null
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 opções. Os eventos personalizados só são compatíveis com 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 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 de 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 recarga 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
Direcionamento 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 resultados cuja classificação média do usuário é 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 pesquisa textual. 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 de um usuário. Ele se conecta a um elemento de entrada do tipo text e aguarda a entrada de texto nesse campo. A lista de previsões é apresentada como um menu suspenso 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 é anexada 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 a serem incluídos para o lugar na resposta de detalhes quando eles são recuperados com sucesso. 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 foram recuperados. Caso contrário, retorna um objeto Place 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 preferida em que os resultados de lugar serão retornados. 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 de componente. As restrições de componente são usadas para restringir as previsões apenas àquelas dentro do componente principal. 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 são recuperados com sucesso. 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 a serem retornadas. Para saber os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos 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 de detalhes de lugar falhar, o PlaceResult vai conter a entrada do usuário na propriedade name, sem outras propriedades definidas.

Interface 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 de componentes. As restrições de componente são usadas para restringir as previsões apenas àquelas dentro do componente principal. Por exemplo, o país.
fields optional
Tipo:Array<string> optional
Campos a serem incluídos para o lugar na resposta de detalhes quando eles são recuperados com sucesso, o que será cobrado. Se ['ALL'] for transmitido, todos os campos disponíveis serão 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 é necessário recuperar apenas IDs de lugar. O PlaceResult disponibilizado quando o evento "place_changed" é acionado só tem os campos "place_id", "types" e "name", com o "place_id", "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 Autocomplete só deve retornar 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 direcionar os resultados, mas não restringir, a lugares contidos nos limites.
types optional
Tipo:Array<string> optional
Os tipos de previsões a serem retornadas. Para saber os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos serão retornados.

Classe google.maps.places.SearchBox

Um widget que fornece previsões de consultas com base na entrada de texto de um usuário. Ele se conecta a um elemento de entrada do tipo text e aguarda a entrada de texto nesse campo. A lista de previsões é apresentada como um menu suspenso 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 é anexada 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 para os quais as previsões de consulta são tendenciosas.
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 consultas. Os resultados serão direcionados, mas não restritos, a essa área.
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 direcionar as previsões de consulta. As previsões são direcionadas, mas não restritas, a consultas que visam esses limites.