Places Widgets

Classe PlaceAutocompleteElement

Classe google.maps.places.PlaceAutocompleteElement

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

Elemento personalizado:
<gmp-place-autocomplete name="string" requested-language="string" requested-region="string" types="type1 type2 type3..."></gmp-place-autocomplete>

Essa classe estende HTMLElement.

Essa classe implementa PlaceAutocompleteElementOptions.

Acesse chamando const {PlaceAutocompleteElement} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parâmetros:
componentRestrictions
Tipo:ComponentRestrictions optional
As restrições do componente. As restrições de componente são usadas para restringir as previsões apenas às que estão no componente pai. Por exemplo, o país.
locationBias
Tipo:LocationBias optional
Um limite flexível ou sugestão 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 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 para mais detalhes.
Atributo HTML:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
Tipo:string optional
Um identificador de idioma para o idioma em que os resultados precisam ser retornados, se possível. Os resultados no idioma selecionado podem ter 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 formatar e filtrar resultados. Ele não restringe as sugestões a esse país. O código regional 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), e 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>
types
Tipo:Array<string> optional
Os tipos de previsões que serão retornados. Para saber quais tipos são aceitos, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos eles vão ser trazidos.
Atributo HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></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 prediction-item-main-text é colorido em preto. Se houver outro texto no item de previsão, ele 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 no item de previsão. Ele não faz parte necessariamente 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 de 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.
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
Argumentos: 
Esse evento é acionado quando um usuário seleciona uma sugestão de lugar. Contém um objeto Place.
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é transmitido.

Interface PlaceAutocompleteElementOptions

Interface google.maps.places.PlaceAutocompleteElementOptions

Opções para criar um PlaceAutocompleteElement.
componentRestrictions optional
Tipo:ComponentRestrictions optional
Ver PlaceAutocompleteElement.componentRestrictions
locationBias optional
Tipo:LocationBias optional
Ver PlaceAutocompleteElement.locationBias
locationRestriction optional
Tipo:LocationRestriction optional
Ver PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
Tipo:string optional
Ver PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
Tipo:string optional
Ver PlaceAutocompleteElement.requestedRegion
types optional
Tipo:Array<string> optional
Ver PlaceAutocompleteElement.types

Classe PlaceAutocompletePlaceSelectEvent

Classe google.maps.places.PlaceAutocompletePlaceSelectEvent

Esse evento é criado depois que o usuário seleciona um lugar com o elemento Place Autocomplete. Acesse a seleção com event.place.

Essa classe estende Event.

Acesse chamando const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.
Betaplace
Tipo:Place

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 chamando const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.

Classe PlaceDetailsElement

Classe google.maps.places.PlaceDetailsElement

Um elemento HTML que mostra detalhes de um lugar. Use os métodos configureFromPlace() ou configureFromLocation() para especificar o conteúdo a ser renderizado. Para usar o elemento "Detalhes do lugar", ative a API Places UI Kit para seu projeto no console do Google Cloud.

Elemento personalizado:
<gmp-place-details size="small"></gmp-place-details>

Essa classe estende HTMLElement.

Essa classe implementa PlaceDetailsElementOptions.

Acesse chamando 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, a localização e a viewport do lugar renderizado no momento.
size
Tipo:PlaceDetailsSize optional
A variante de tamanho do PlaceDetailsElement. Por padrão, o elemento vai mostrar PlaceDetailsSize.X_LARGE.
Atributo HTML:
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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.
configureFromLocation
configureFromLocation(location)
Parâmetros:
Valor de retorno:Promise<void> uma promessa que é resolvida quando os dados do lugar são carregados e renderizados.
Configura o widget de um LatLng usando a geocodificação reversa.
configureFromPlace
configureFromPlace(place)
Parâmetros:
  • place:  Place|{id:string} O local para renderizar detalhes.
Valor de retorno:Promise<void> uma promessa que é resolvida quando os dados do lugar são carregados e renderizados.
Configura o widget usando um objeto Place ou um ID de lugar.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
gmp-load
function(event)
Argumentos: 
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é transmitido.
gmp-requesterror
function(event)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é transmitido.

Interface PlaceDetailsElementOptions

Interface google.maps.places.PlaceDetailsElementOptions

Opções para PlaceDetailsElement.
size optional
Tipo:PlaceDetailsSize optional
Ver PlaceDetailsElement.size

Constantes PlaceDetailsSize

Constantes google.maps.places.PlaceDetailsSize

Variantes de tamanho para PlaceDetailsElement.

Acesse chamando const {PlaceDetailsSize} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.
LARGE Variante grande, incluindo uma imagem grande, informações básicas e de contato.
MEDIUM Variante média, incluindo uma imagem grande e informações básicas.
SMALL Variante pequena, incluindo uma imagem pequena e informações básicas.
X_LARGE Variante extragrande, que inclui uma colagem de fotos, avaliações e informações completas do lugar.

Classe PlaceListElement

Classe google.maps.places.PlaceListElement

Um elemento HTML que mostra os resultados de uma pesquisa de lugar em uma lista. Use os métodos configureFromSearchByTextRequest() ou configureFromSearchNearbyRequest() para especificar a solicitação que renderiza os resultados. Para usar o elemento de lista de lugares, ative a API Places UI Kit para seu projeto no console do Google Cloud.

Elemento personalizado:
<gmp-place-list selectable></gmp-place-list>

Essa classe estende HTMLElement.

Essa classe implementa PlaceListElementOptions.

Acesse chamando const {PlaceListElement} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.
PlaceListElement
PlaceListElement([options])
Parâmetros:
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
Se os itens da lista podem ser selecionados ou não. Se verdadeiro, os itens da lista serão botões que enviam o evento gmp-placeselect quando clicados. A navegação e seleção acessíveis pelo teclado também são compatíveis.
Atributo HTML:
  • <gmp-place-list selectable></gmp-place-list>
BetaaddEventListener
addEventListener(type, listener[, options])
Parâmetros:
  • type:  string uma string que diferencia maiúsculas de minúsculas que 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ó 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.
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
Parâmetros:
  • request:  SearchByTextRequest a solicitação para renderizar resultados. A propriedade fields do SearchByTextRequest não é obrigatória.
Valor de retorno:Promise<void> uma promessa que é resolvida quando os dados do lugar são carregados e renderizados.
Configura o widget para renderizar os resultados da pesquisa de uma solicitação da API Places Text Search.
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
Parâmetros:
  • request:  SearchNearbyRequest a solicitação para renderizar resultados. A propriedade fields do SearchNearbyRequest não é obrigatória.
Valor de retorno:Promise<void> uma promessa que é resolvida quando os dados do lugar são carregados e renderizados.
Configura o widget para renderizar os resultados da pesquisa de uma solicitação da API Places Nearby Search.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parâmetros:
Valor de retorno:void
Remove um listener de eventos registrado anteriormente com addEventListener do destino. Consulte removeEventListener.
gmp-load
function(event)
Argumentos: 
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é transmitido.
gmp-placeselect
function(event)
Argumentos: 
Esse evento é acionado quando um usuário seleciona um lugar. Contém um objeto Place e o índice do lugar selecionado na lista.
gmp-requesterror
function(event)
Argumentos: 
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é transmitido.

Interface PlaceListElementOptions

Interface google.maps.places.PlaceListElementOptions

Opções para PlaceListElement.
selectable optional
Tipo:boolean optional
Ver PlaceListElement.selectable

Classe PlaceListPlaceSelectEvent

Classe google.maps.places.PlaceListPlaceSelectEvent

Esse evento é emitido pelo PlaceListElement quando o usuário seleciona um lugar.

Essa classe estende Event.

Acesse chamando const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places"). Consulte Bibliotecas na API Maps JavaScript.
index
Tipo:number
O índice da lista do lugar selecionado.
place
Tipo:Place
Um objeto Place que contém o ID, o local e a viewport do lugar selecionado.

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 conecta a um elemento de entrada do tipo text e ouve a entrada de texto nesse campo. A lista de previsões é apresentada como uma lista suspensa e é atualizada à medida que o texto é inserido.

Essa classe estende MVCObject.

Acesse chamando 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 viés.
Retorna os limites em que as previsões são tendenciosas.
getFields
getFields()
Parâmetros:nenhum
Valor de retorno:Array<string>|undefined
Retorna os campos a serem incluídos no lugar na resposta de detalhes quando os detalhes 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 tiverem sido recuperados. Caso contrário, ele retorna um objeto Place fictício, 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 em que os resultados do Place 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 do componente. As restrições de componente são usadas para restringir as previsões apenas às que estão no 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 no 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 saber quais tipos são aceitos, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos eles vão ser trazidos.
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 digitar o nome de um lugar que não foi sugerido pelo controle e pressionar a tecla Enter ou se uma solicitação de detalhes do 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 lugares serão pesquisados.
componentRestrictions optional
Tipo:ComponentRestrictions optional
As restrições do componente. As restrições de componente são usadas para restringir as previsões apenas às que estão no componente pai. Por exemplo, o país.
fields optional
Tipo:Array<string> optional
Campos a serem incluídos no lugar na resposta de detalhes quando os detalhes forem recuperados com sucesso, que serão cobrados. Se ['ALL'] for transmitido, todos os campos disponíveis serão retornados e faturados (isso 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 de preenchimento automático. Essa configuração está desativada por padrão.
strictBounds optional
Tipo:boolean optional
Um valor booleano que indica que o widget do Autocomplete só precisa retornar os lugares que estão dentro dos limites do widget no momento em que a consulta é enviada. A definição de strictBounds como false (padrão) vai direcionar os resultados, mas não restringi-los, aos lugares contidos nos limites.
types optional
Tipo:Array<string> optional
Os tipos de previsões que serão retornados. Para saber quais tipos são aceitos, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos eles vão ser trazidos.

Classe google.maps.places.SearchBox

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

Essa classe estende MVCObject.

Acesse chamando 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 em que 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 enviesar as previsões de consulta. Os resultados serão direcionados a 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 precisa 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 em que as previsões de consulta serão enviesadas. As previsões são direcionadas, mas não restritas, a consultas com foco nesses limites.