Classe PlaceAutocompleteElement
classe
google.maps.places.PlaceAutocompleteElement
estende HTMLElement
implementa PlaceAutocompleteElementOptions
biblioteca "places"
PlaceAutocompleteElement é uma subclasse HTMLElement que fornece um componente de interface para a API Places Autocomplete.
O PlaceAutocompleteElement usa AutocompleteSessionTokens internamente para agrupar as fases de consulta e seleção de uma pesquisa de preenchimento automático do usuário.
A primeira chamada para Place.fetchFields em um Place retornado por PlacePrediction.toPlace vai incluir automaticamente o token de sessão usado para buscar o PlacePrediction.
Consulte https://developers.google.com/maps/documentation/places/web-service/place-session-tokens para mais detalhes sobre como os tokens de sessão funcionam.
<gmp-place-autocomplete description="string" disabled future-opening-businesses-included included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." internal-usage-attribution-ids="space separated strings" maxlength="number" name="string" no-clear-button no-input-icon origin="lat,lng" placeholder="string" pure-service-area-businesses-included readonly requested-language="string" requested-region="string" unit-system="value-name"> </gmp-place-autocomplete>
const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement([options])Parâmetros:
|
Propriedades | |
|---|---|
description
attr: description |
Tipo:
string optionalA descrição a ser usada para o elemento de entrada. Isso será detectado pelos leitores de tela quando o elemento de entrada estiver em foco. Consulte https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby para mais detalhes.
Atributo HTML: description="string" |
disabled
attr: disabled |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o elemento de entrada está desativado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled para mais detalhes.
Atributo HTML: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
Tipo:
boolean optionalSe é preciso incluir lugares que ainda não estão abertos, mas que devem abrir no futuro.
Atributo HTML: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
Tipo:
Array<string> optionalTipo de lugar principal incluído (por exemplo, "restaurant" ou "gas_station").
Um lugar só será retornado se o tipo principal dele estiver incluído nessa lista. É possível especificar até cinco valores. Se nenhum tipo for especificado, todos os tipos de lugar serão retornados. Atributo HTML: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
Tipo:
Array<string> optionalInclua apenas resultados nas regiões especificadas, que podem ser até 15 códigos de região de dois caracteres do CLDR. Um conjunto vazio não restringe os resultados. Se
locationRestriction e includedRegionCodes forem definidos, os resultados vão estar na área de interseção.Atributo HTML: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
locationBias |
Tipo:
LocationBias optionalUm limite flexível ou uma dica para usar ao pesquisar lugares. |
locationRestriction |
Tipo:
LocationRestriction optionalLimites para restringir os resultados da pesquisa. |
maxlength
attr: maxlength |
Tipo:
number optionalO número máximo de caracteres que o usuário pode inserir. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength para mais detalhes.
Atributo HTML: maxlength="number" |
name
attr: name |
Tipo:
string optionalO nome a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para mais detalhes. Segue o mesmo comportamento do atributo de nome para entradas. Esse é o nome que será usado quando um formulário for enviado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para mais detalhes.
Atributo HTML: name="string" |
noClearButton
attr: no-clear-button |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o botão "Limpar" deve ser ocultado.
Atributo HTML: no-clear-button |
noInputIcon
attr: no-input-icon |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o ícone de entrada deve ser ocultado.
Atributo HTML: no-input-icon |
origin
attr: origin |
Tipo de entrada:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de saída: LatLngAltitude optionalA origem para calcular a distância. Se não for especificada, a distância não será calculada. A altitude, se fornecida, não é usada no cálculo.
Atributo HTML:
|
placeholder
attr: placeholder |
Tipo:
string optionalO texto de preenchimento a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder para mais detalhes.
Atributo HTML: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
Tipo:
boolean optionalSe é preciso incluir lugares que são apenas empresas de serviço local.
Atributo HTML: pure-service-area-businesses-included |
readonly
attr: readonly |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o elemento de entrada é somente leitura. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly para mais detalhes.
Atributo HTML: readonly |
requestedLanguage
attr: requested-language |
Tipo:
string optionalUm 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: requested-language="string" |
requestedRegion
attr: requested-region |
Tipo:
string optionalUm código de região usado para formatação e filtragem de resultados. Ele não restringe as sugestões a esse país. O código de região aceita um valor de dois caracteres de ccTLD ("domínio de nível superior"). A maioria dos códigos ccTLD é idêntica aos códigos ISO 3166-1, com algumas exceções notáveis. Por exemplo, o ccTLD do Reino Unido é "uk" (
.co.uk), enquanto o código ISO 3166-1 é "gb" (tecnicamente para a entidade "Reino Unido da Grã-Bretanha e Irlanda do Norte").Atributo HTML: requested-region="string" |
unitSystem
attr: unit-system |
O sistema de unidades usado para mostrar distâncias. Se não for especificado, o sistema de unidades será determinado por requestedRegion.
Atributo HTML: unit-system="value-name" |
value |
Tipo de entrada:
string optionalTipo de saída: stringO valor do elemento de entrada. |
Slots | |
|---|---|
clear-icon |
Coloca o elemento com slot na posição do ícone de limpar. O botão de limpar é exibido no final da caixa de entrada quando há texto nela. |
input-icon |
Coloca o elemento com slot na posição do ícone de entrada. O ícone de entrada é exibido no início da caixa de entrada no modo inline. |
prediction-item-icon |
Esse slot aceita exatamente um elemento <template> para renderizar como o ícone mostrado ao lado do item de previsão. |
Peças | |
|---|---|
focus-ring |
O elemento usado para mostrar o anel de foco ao redor do elemento em foco (entrada ou itens de previsão) |
input |
O elemento de entrada para o elemento de preenchimento automático. |
prediction-item |
Um item no menu suspenso de previsões que representa uma única previsão. |
prediction-item-icon |
O ícone exibido à esquerda de cada item na lista de previsões. |
prediction-item-main-text |
Uma parte do prediction-item que é o texto principal da previsão. Para localizações geográficas, este item contém o nome de um lugar, como "São Paulo", ou o nome de uma rua e o número, como 'Avenida Paulista, 2013'. Por padrão, o prediction-item-main-text fica em preto. Qualquer outro texto no prediction-item vai estar fora de prediction-item-main-text e herdar o estilo de prediction-item. A cor padrão é cinza. Normalmente, o texto adicional é um endereço. |
prediction-item-match |
A parte da previsão retornada que corresponde à entrada do usuário. Por padrão, esse texto correspondido é destacado com texto em negrito. O texto correspondente é destacado apenas em prediction-item-main-text. |
prediction-item-nonmatch |
A parte do texto principal da previsão que não corresponde à entrada do usuário. |
prediction-item-secondary-text |
Uma parte do prediction-item que é o texto secundário da previsão. Normalmente, o texto adicional é um endereço. |
prediction-item-selected |
O item para o qual a pessoa navega usando o teclado. Observação: os itens selecionados serão afetados pelos estilos desta parte e também pelos estilos da parte prediction-item. |
prediction-list |
O elemento visual contendo a lista de previsões retornadas pelo serviço Place Autocomplete. Ela aparece como uma lista suspensa abaixo do PlaceAutocompleteElement. |
Propriedades CSS | |
|---|---|
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color |
Substitui a fonte do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font |
Substitui a fonte do elemento. |
font-family |
Substitui a fonte do elemento. |
font-size |
Substitui a fonte do elemento. |
font-style |
Substitui a fonte do elemento. |
font-weight |
Substitui a fonte do elemento. |
line-height |
Substitui a fonte do elemento. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(errorEvent)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-select |
function(placePredictionSelectEvent)Argumentos:
Esse evento é acionado quando um usuário seleciona uma previsão de lugar. Contém um objeto PlacePrediction que pode ser convertido em um objeto Place. |
Interface PlaceAutocompleteElementOptions
interface
google.maps.places.PlaceAutocompleteElementOptions
implementada por PlaceAutocompleteElement
Opções para criar um PlaceAutocompleteElement. Para ver a descrição de cada propriedade, consulte a propriedade de mesmo nome na classe PlaceAutocompleteElement.
Propriedades | |
|---|---|
description
opcional |
Tipo:
string optionalA descrição a ser usada para o elemento de entrada. Isso será detectado pelos leitores de tela quando o elemento de entrada estiver em foco. |
disabled
opcional |
Tipo:
boolean optional |
futureOpeningBusinessesIncluded
opcional |
Tipo:
boolean optional |
includedPrimaryTypes
opcional |
Tipo:
Array<string> optional |
includedRegionCodes
opcional |
Tipo:
Array<string> optional |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optional |
locationBias
opcional |
Tipo:
LocationBias optional |
locationRestriction
opcional |
Tipo:
LocationRestriction optional |
maxlength
opcional |
Tipo:
number optional |
name
opcional |
Tipo:
string optional |
noClearButton
opcional |
Tipo:
boolean optional |
noInputIcon
opcional |
Tipo:
boolean optional |
origin
opcional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
opcional |
Tipo:
string optional |
pureServiceAreaBusinessesIncluded
opcional |
Tipo:
boolean optional |
readonly
opcional |
Tipo:
boolean optional |
requestedLanguage
opcional |
Tipo:
string optional |
requestedRegion
opcional |
Tipo:
string optional |
unitSystem
opcional |
Tipo:
UnitSystem optional |
value
opcional |
Tipo:
string optionalO valor do elemento de entrada. |
Classe PlacePredictionSelectEvent
classe
google.maps.places.PlacePredictionSelectEvent
estende Event
biblioteca "places"
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.
const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");
Propriedades | |
|---|---|
placePrediction
somente leitura |
Tipo:
PlacePredictionConverta em um Place chamando PlacePrediction.toPlace. |
Classe BasicPlaceAutocompleteElement
classe
google.maps.places.BasicPlaceAutocompleteElement
estende HTMLElement
implementa BasicPlaceAutocompleteElementOptions
biblioteca "places"
BasicPlaceAutocompleteElement é uma subclasse HTMLElement que fornece um componente de interface para a API Places Autocomplete.
<gmp-basic-place-autocomplete description="string" disabled future-opening-businesses-included included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." internal-usage-attribution-ids="space separated strings" maxlength="number" name="string" no-clear-button no-input-icon origin="lat,lng" placeholder="string" pure-service-area-businesses-included readonly requested-language="string" requested-region="string" unit-system="value-name"> </gmp-basic-place-autocomplete>
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement([options])Parâmetros:
|
Propriedades | |
|---|---|
description
attr: description |
Tipo:
string optionalA descrição a ser usada para o elemento de entrada. Isso será detectado pelos leitores de tela quando o elemento de entrada estiver em foco. Consulte https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby para mais detalhes.
Atributo HTML: description="string" |
disabled
attr: disabled |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o elemento de entrada está desativado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled para mais detalhes.
Atributo HTML: disabled |
futureOpeningBusinessesIncluded
attr: future-opening-businesses-included |
Tipo:
boolean optionalSe é preciso incluir lugares que ainda não estão abertos, mas que devem abrir no futuro.
Atributo HTML: future-opening-businesses-included |
includedPrimaryTypes
attr: included-primary-types |
Tipo:
Array<string> optionalTipo de lugar principal incluído (por exemplo, "restaurant" ou "gas_station").
Um lugar só será retornado se o tipo principal dele estiver incluído nessa lista. É possível especificar até cinco valores. Se nenhum tipo for especificado, todos os tipos de lugar serão retornados. Atributo HTML: included-primary-types="type1 type2 type3..." |
includedRegionCodes
attr: included-region-codes |
Tipo:
Array<string> optionalInclua apenas resultados nas regiões especificadas, que podem ser até 15 códigos de região de dois caracteres do CLDR. Um conjunto vazio não restringe os resultados. Se
locationRestriction e includedRegionCodes forem definidos, os resultados vão estar na área de interseção.Atributo HTML: included-region-codes="c1 c2 c3..." |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
locationBias |
Tipo:
LocationBias optionalUm limite flexível ou uma dica para usar ao pesquisar lugares. |
locationRestriction |
Tipo:
LocationRestriction optionalLimites para restringir os resultados da pesquisa. |
maxlength
attr: maxlength |
Tipo:
number optionalO número máximo de caracteres que o usuário pode inserir. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength para mais detalhes.
Atributo HTML: maxlength="number" |
name
attr: name |
Tipo:
string optionalO nome a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para mais detalhes. Segue o mesmo comportamento do atributo de nome para entradas. Esse é o nome que será usado quando um formulário for enviado. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para mais detalhes.
Atributo HTML: name="string" |
noClearButton
attr: no-clear-button |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o botão "Limpar" deve ser ocultado.
Atributo HTML: no-clear-button |
noInputIcon
attr: no-input-icon |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o ícone de entrada deve ser ocultado.
Atributo HTML: no-input-icon |
origin
attr: origin |
Tipo de entrada:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de saída: LatLngAltitude optionalA origem para calcular a distância. Se não for especificada, a distância não será calculada. A altitude, se fornecida, não é usada no cálculo.
Atributo HTML:
|
placeholder
attr: placeholder |
Tipo:
string optionalO texto de preenchimento a ser usado para o elemento de entrada. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder para mais detalhes.
Atributo HTML: placeholder="string" |
pureServiceAreaBusinessesIncluded
attr: pure-service-area-businesses-included |
Tipo:
boolean optionalSe é preciso incluir lugares que são apenas empresas de serviço local.
Atributo HTML: pure-service-area-businesses-included |
readonly
attr: readonly |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o elemento de entrada é somente leitura. Consulte https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly para mais detalhes.
Atributo HTML: readonly |
requestedLanguage
attr: requested-language |
Tipo:
string optionalUm 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: requested-language="string" |
requestedRegion
attr: requested-region |
Tipo:
string optionalUm código de região usado para formatação e filtragem de resultados. Ele não restringe as sugestões a esse país. O código de região aceita um valor de dois caracteres de ccTLD ("domínio de nível superior"). A maioria dos códigos ccTLD é idêntica aos códigos ISO 3166-1, com algumas exceções notáveis. Por exemplo, o ccTLD do Reino Unido é "uk" (
.co.uk), enquanto o código ISO 3166-1 é "gb" (tecnicamente para a entidade "Reino Unido da Grã-Bretanha e Irlanda do Norte").Atributo HTML: requested-region="string" |
unitSystem
attr: unit-system |
O sistema de unidades usado para mostrar distâncias. Se não for especificado, o sistema de unidades será determinado por requestedRegion.
Atributo HTML: unit-system="value-name" |
Slots | |
|---|---|
clear-icon |
Coloca o elemento com slot na posição do ícone de limpar. O botão de limpar é exibido no final da caixa de entrada quando há texto nela. |
input-icon |
Coloca o elemento com slot na posição do ícone de entrada. O ícone de entrada é exibido no início da caixa de entrada no modo inline. |
prediction-item-icon |
Esse slot aceita exatamente um elemento <template> para renderizar como o ícone mostrado ao lado do item de previsão. |
Peças | |
|---|---|
focus-ring |
O elemento usado para mostrar o anel de foco ao redor do elemento em foco (entrada ou itens de previsão) |
input |
O elemento de entrada para o elemento de preenchimento automático. |
prediction-item |
Um item no menu suspenso de previsões que representa uma única previsão. |
prediction-item-icon |
O ícone exibido à esquerda de cada item na lista de previsões. |
prediction-item-main-text |
Uma parte do prediction-item que é o texto principal da previsão. Para localizações geográficas, este item contém o nome de um lugar, como "São Paulo", ou o nome de uma rua e o número, como 'Avenida Paulista, 2013'. Por padrão, o prediction-item-main-text fica em preto. Qualquer outro texto no prediction-item vai estar fora de prediction-item-main-text e herdar o estilo de prediction-item. A cor padrão é cinza. Normalmente, o texto adicional é um endereço. |
prediction-item-match |
A parte da previsão retornada que corresponde à entrada do usuário. Por padrão, esse texto correspondido é destacado com texto em negrito. O texto correspondente é destacado apenas em prediction-item-main-text. |
prediction-item-nonmatch |
A parte do texto principal da previsão que não corresponde à entrada do usuário. |
prediction-item-secondary-text |
Uma parte do prediction-item que é o texto secundário da previsão. Normalmente, o texto adicional é um endereço. |
prediction-item-selected |
O item para o qual a pessoa navega usando o teclado. Observação: os itens selecionados serão afetados pelos estilos desta parte e também pelos estilos da parte prediction-item. |
prediction-list |
O elemento visual contendo a lista de previsões retornadas pelo serviço Place Autocomplete. Ela aparece como uma lista suspensa abaixo do PlaceAutocompleteElement. |
Propriedades CSS | |
|---|---|
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color |
Substitui a fonte do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font |
Substitui a fonte do elemento. |
font-family |
Substitui a fonte do elemento. |
font-size |
Substitui a fonte do elemento. |
font-style |
Substitui a fonte do elemento. |
font-weight |
Substitui a fonte do elemento. |
line-height |
Substitui a fonte do elemento. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(errorEvent)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-select |
function(placeSelectEvent)Argumentos:
Esse evento é acionado quando um usuário seleciona uma previsão de lugar. Contém um objeto Place. |
Interface BasicPlaceAutocompleteElementOptions
interface
google.maps.places.BasicPlaceAutocompleteElementOptions
implementada por BasicPlaceAutocompleteElement
Opções para criar um BasicPlaceAutocompleteElement.
Propriedades | |
|---|---|
description
opcional |
Tipo:
string optionalA descrição a ser usada para o elemento de entrada. Isso será detectado pelos leitores de tela quando o elemento de entrada estiver em foco. |
disabled
opcional |
Tipo:
boolean optional |
futureOpeningBusinessesIncluded
opcional |
Tipo:
boolean optional |
includedPrimaryTypes
opcional |
Tipo:
Array<string> optional |
includedRegionCodes
opcional |
Tipo:
Array<string> optional |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optional |
locationBias
opcional |
Tipo:
LocationBias optional |
locationRestriction
opcional |
Tipo:
LocationRestriction optional |
maxlength
opcional |
Tipo:
number optional |
name
opcional |
Tipo:
string optional |
noClearButton
opcional |
Tipo:
boolean optional |
noInputIcon
opcional |
Tipo:
boolean optional |
origin
opcional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
placeholder
opcional |
Tipo:
string optional |
pureServiceAreaBusinessesIncluded
opcional |
Tipo:
boolean optional |
readonly
opcional |
Tipo:
boolean optional |
requestedLanguage
opcional |
Tipo:
string optional |
requestedRegion
opcional |
Tipo:
string optional |
unitSystem
opcional |
Tipo:
UnitSystem optional |
Classe PlaceDetailsElement
classe
google.maps.places.PlaceDetailsElement
estende HTMLElement
implementa PlaceDetailsElementOptions
estendida por AdvancedPlaceDetailsElement
biblioteca "places"
Mostra detalhes de um lugar em um layout completo. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.
Exemplo:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details> Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-place-details internal-usage-attribution-ids="space separated strings"> </gmp-place-details>
const {PlaceDetailsElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])Parâmetros:
|
Propriedades | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
place
somente leitura |
Tipo:
Place optionalSomente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento. |
Propriedades CSS | |
|---|---|
--gmp-button-border-color |
Cor da borda do botão "Abrir no Maps". |
--gmp-button-border-radius |
Raio da borda do botão "Abrir no Maps". |
--gmp-button-border-width |
Largura da borda do botão "Abrir no Maps". |
--gmp-collage-border-radius-outer |
Raio da borda dos cantos externos da colagem de mídia. |
--gmp-dialog-border-radius |
Raio da borda da caixa de diálogo de declaração do Google Maps. |
--gmp-mat-color-disabled-surface |
Cor de superfície destinada a transmitir estados desativados ou ausência. Usado para estrelas de avaliação vazias. |
--gmp-mat-color-info |
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de cadeira de rodas. |
--gmp-mat-color-negative |
Cor dos elementos da interface com sentimento negativo. Usado para o texto "Fechado" no status "Aberto agora". |
--gmp-mat-color-neutral-container |
Cor do contêiner para elementos neutros preenchidos da interface. Usado para marcadores de imagem e selo de data de publicação da avaliação. |
--gmp-mat-color-on-neutral-container |
Cor do texto e dos ícones em relação à cor neutra do contêiner. Usado para o selo de data de publicação da avaliação e o selo de disponibilidade do carregador de VE quando indisponível. |
--gmp-mat-color-on-positive-container |
Cor dos textos e ícones em contraste com a cor do contêiner positivo. Usado para o selo de disponibilidade do carregador de VE, quando disponível. |
--gmp-mat-color-on-secondary-container |
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usado para texto e ícones no botão "Abrir no Maps". |
--gmp-mat-color-on-surface |
Cor para texto e ícones em qualquer cor de superfície. Usado para texto normal. |
--gmp-mat-color-on-surface-variant |
Cor de menor destaque para texto e ícones em qualquer cor de superfície. Usado para texto com menos ênfase. |
--gmp-mat-color-outline-decorative |
Cor do contorno de elementos não interativos. Usado para a borda do elemento. |
--gmp-mat-color-positive |
Cor dos elementos da interface com sentimento positivo. Usado para o texto "Aberto" no status "Aberto agora". |
--gmp-mat-color-positive-container |
Cor do contêiner para elementos da interface que transmitem um sentimento positivo. Usado para o selo de disponibilidade do carregador de VE, quando disponível. |
--gmp-mat-color-primary |
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para contagem de avaliações, links na caixa de diálogo de declarações do Google Maps, link do site, ícones na guia Visão Geral e (cor do texto / foco / ao passar o cursor) nos títulos da barra de guias. |
--gmp-mat-color-secondary-container |
Cor de preenchimento menos proeminente em relação à superfície, para componentes recessivos, como botões tonais. Usado para o plano de fundo do botão "Abrir no Maps". |
--gmp-mat-color-surface |
Cor para planos de fundo. Usada para os planos de fundo do elemento e da caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-body-medium |
Usado para o endereço, a classificação, o tipo, o preço, o status de aberto agora, o horário de funcionamento, a avaliação, o número de telefone, o site, o Plus Code, os principais recursos e o corpo do texto na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-body-small |
Usado para o corpo do texto na lista de recursos da guia "Sobre". |
--gmp-mat-font-display-small |
Usado para o nome do lugar e o texto de cada título de recurso na guia "Sobre". |
--gmp-mat-font-family |
Família de fontes base usada para todo o texto. |
--gmp-mat-font-headline-medium |
Usado para o texto do título na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-label-large |
Usado para os títulos das guias, o botão "Abrir no Maps", o texto de atribuição do avaliador na galeria de fotos, o texto de atribuição do avaliador na seção de avaliações e os links na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-label-medium |
Usado para o selo de contagem de fotos e o selo de data de publicação da avaliação. |
--gmp-mat-font-title-small |
Usado para o título de cada seção na guia "Sobre". |
--gmp-mat-spacing-extra-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-extra-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-medium |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-two-extra-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-star-rating-color |
Cor das estrelas preenchidas na classificação. |
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font-size |
Dimensiona todo o texto e os ícones no elemento, que são definidos internamente em ems. O valor padrão é 16px. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-load |
function(event)Argumentos:
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado. |
Interface PlaceDetailsElementOptions
interface
google.maps.places.PlaceDetailsElementOptions
estendida por AdvancedPlaceDetailsElementOptions
implementada por AdvancedPlaceDetailsElement, PlaceDetailsElement
Opções para PlaceDetailsElement.
Propriedades | |
|---|---|
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
Classe PlaceDetailsCompactElement
classe
google.maps.places.PlaceDetailsCompactElement
estende HTMLElement
implementa PlaceDetailsCompactElementOptions
estendida por AdvancedPlaceDetailsCompactElement
biblioteca "places"
Mostra detalhes de um lugar em um layout compacto. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.
Exemplo:
<gmp-place-details-compact>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-details-compact> Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-place-details-compact internal-usage-attribution-ids="space separated strings" orientation="value-name" truncation-preferred> </gmp-place-details-compact>
const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])Parâmetros:
|
Propriedades | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Tipo:
PlaceDetailsOrientation optionalPadrão:
PlaceDetailsOrientation.VERTICALA variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML: orientation="value-name" |
place
somente leitura |
Tipo:
Place optionalSomente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento. |
truncationPreferred
attr: truncation-preferred |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe for verdadeiro, o nome e o endereço do lugar serão truncados para caber em uma linha, em vez de serem quebrados.
Atributo HTML: truncation-preferred |
Propriedades CSS | |
|---|---|
--gmp-button-border-color |
Cor da borda do botão "Abrir no Maps". |
--gmp-button-border-radius |
Raio da borda do botão "Abrir no Maps". |
--gmp-button-border-width |
Largura da borda do botão "Abrir no Maps". |
--gmp-dialog-border-radius |
Raio da borda da caixa de diálogo de declaração do Google Maps. |
--gmp-mat-color-info |
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de cadeira de rodas. |
--gmp-mat-color-negative |
Cor dos elementos da interface com sentimento negativo. Usado para o texto "Fechado" no status "Aberto agora". |
--gmp-mat-color-neutral-container |
Cor do contêiner para elementos neutros preenchidos da interface. Usado para marcadores de posição de imagem. |
--gmp-mat-color-on-secondary-container |
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usado para texto e ícones no botão "Abrir no Maps". |
--gmp-mat-color-on-surface |
Cor para texto e ícones em qualquer cor de superfície. Usado para texto normal. |
--gmp-mat-color-on-surface-variant |
Cor de menor destaque para texto e ícones em qualquer cor de superfície. Usado para texto com menos ênfase. |
--gmp-mat-color-outline-decorative |
Cor do contorno de elementos não interativos. Usado para a borda do elemento. |
--gmp-mat-color-positive |
Cor dos elementos da interface com sentimento positivo. Usado para o texto "Aberto" no status "Aberto agora". |
--gmp-mat-color-primary |
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para a contagem de avaliações, bem como para links na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-color-secondary-container |
Cor de preenchimento menos proeminente em relação à superfície, para componentes recessivos, como botões tonais. Usado para o plano de fundo do botão "Abrir no Maps". |
--gmp-mat-color-surface |
Cor para planos de fundo. Usada para os planos de fundo do elemento e da caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-body-medium |
Usado para o corpo do texto na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-body-small |
Usado para o endereço, a classificação, o tipo, o preço e o status de funcionamento do lugar. |
--gmp-mat-font-family |
Família de fontes base usada para todo o texto. |
--gmp-mat-font-headline-medium |
Usado para o texto do título na caixa de diálogo de declarações do Google Maps. |
--gmp-mat-font-label-large |
Usado para o botão "Abrir no Maps", bem como para links na caixa de diálogo de declarações do Google Maps e no texto de atribuição do avaliador na galeria de fotos. |
--gmp-mat-font-label-medium |
Usado para o selo de contagem de fotos. |
--gmp-mat-font-title-small |
Usado para o nome do lugar. |
--gmp-mat-spacing-extra-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-medium |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-star-rating-color |
Cor das estrelas preenchidas na classificação. |
--gmp-thumbnail-border-radius |
Raio da borda da imagem em miniatura do lugar. |
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font-size |
Dimensiona todo o texto e os ícones no elemento, que são definidos internamente em ems. O valor padrão é 16px. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-load |
function(event)Argumentos:
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado. |
PlaceDetailsCompactElementOptions
interface
google.maps.places.PlaceDetailsCompactElementOptions
estendida por AdvancedPlaceDetailsCompactElementOptions
implementada por AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement
Opções para PlaceDetailsCompactElement.
Propriedades | |
|---|---|
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
orientation
opcional |
Tipo:
PlaceDetailsOrientation optionalConsulte PlaceDetailsCompactElement.orientation. |
truncationPreferred
opcional |
Tipo:
boolean optional |
Classe AdvancedPlaceDetailsElement
classe
google.maps.places.AdvancedPlaceDetailsElement
estende PlaceDetailsElement, HTMLElement
implementa AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
biblioteca "places"
Mostra detalhes de um lugar em um layout completo. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um elemento PlaceStandardContentElement, PlaceAllContentElement ou de detalhes do lugar diretamente para configurar o conteúdo a ser renderizado.
Exemplo:
<gmp-advanced-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
<gmp-place-standard-content>
</gmp-place-standard-content>
</gmp-advanced-place-details> Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-advanced-place-details internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details>
const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
AdvancedPlaceDetailsElement |
AdvancedPlaceDetailsElement([options])Parâmetros:
|
Propriedades | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
place
somente leitura |
Tipo:
Place optionalSomente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento. |
Slots | |
|---|---|
action-corner |
Um horário para PlaceLinkElement e PlaceButtonElement. |
action-main |
Um horário para PlaceLinkElement e PlaceButtonElement. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
Herdado:
gmp-error,
gmp-load
|
Interface AdvancedPlaceDetailsElementOptions
interface
google.maps.places.AdvancedPlaceDetailsElementOptions
estende PlaceDetailsElementOptions
implementada por AdvancedPlaceDetailsElement
Opções para AdvancedPlaceDetailsElement.
Propriedades | |
|---|---|
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
Classe AdvancedPlaceDetailsCompactElement
classe
google.maps.places.AdvancedPlaceDetailsCompactElement
estende PlaceDetailsCompactElement, HTMLElement
implementa AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
biblioteca "places"
Mostra detalhes de um lugar em um layout compacto. Anexe um PlaceDetailsPlaceRequestElement ou PlaceDetailsLocationRequestElement para especificar o lugar a ser renderizado. Anexe um PlaceStandardContentElement, PlaceAllContentElement ou especifique filhos de conteúdo específicos para configurar o conteúdo a ser renderizado.
Para usar esse elemento, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-advanced-place-details-compact internal-usage-attribution-ids="space separated strings"> </gmp-advanced-place-details-compact>
const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
AdvancedPlaceDetailsCompactElement |
AdvancedPlaceDetailsCompactElement([options])Parâmetros:
|
Propriedades | |
|---|---|
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
place
somente leitura |
Tipo:
Place optionalSomente leitura. Objeto Place que contém o ID, o local e a janela de visualização do lugar renderizado no momento. |
Herdado:
orientation (attr: orientation),
truncationPreferred (attr: truncation-preferred)
| |
Slots | |
|---|---|
action-corner |
Um horário para PlaceLinkElement e PlaceButtonElement. |
action-main |
Um horário para PlaceLinkElement e PlaceButtonElement. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
Herdado:
gmp-error,
gmp-load
|
Interface AdvancedPlaceDetailsCompactElementOptions
interface
google.maps.places.AdvancedPlaceDetailsCompactElementOptions
estende PlaceDetailsCompactElementOptions
implementada por AdvancedPlaceDetailsCompactElement
Opções para AdvancedPlaceDetailsCompactElement.
Propriedades | |
|---|---|
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
Herdado:
orientation,
truncationPreferred
| |
Constantes de PlaceDetailsOrientation
constantes
google.maps.places.PlaceDetailsOrientation
biblioteca "places"
Variantes de orientação para PlaceDetailsCompactElement.
Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo PlaceDetailsOrientationString.
const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");
Constantes | |
|---|---|
HORIZONTAL |
Orientação horizontal. |
VERTICAL |
Orientação vertical. |
Classe PlaceDetailsPlaceRequestElement
classe
google.maps.places.PlaceDetailsPlaceRequestElement
estende HTMLElement
implementa PlaceDetailsPlaceRequestElementOptions
biblioteca "places"
Configura um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados com base em um objeto, ID ou nome de recurso de lugar. Anexe esse elemento como filho de um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados do lugar especificado. Exemplo:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
</gmp-place-details> <gmp-place-details-place-request place="places/###"> </gmp-place-details-place-request>
const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])Parâmetros:
|
Propriedades | |
|---|---|
place
attr: place |
Padrão:
nullO objeto, ID ou nome do recurso do lugar para renderizar detalhes no elemento Place Details Compact. Essa propriedade reflete o atributo como um nome de recurso.
Atributo HTML: place="places/###" |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceDetailsPlaceRequestElementOptions
interface
google.maps.places.PlaceDetailsPlaceRequestElementOptions
implementada por PlaceDetailsPlaceRequestElement
Opções para PlaceDetailsPlaceRequestElement.
Propriedades | |
|---|---|
place
opcional |
Tipo:
Place|string optional |
Classe PlaceDetailsLocationRequestElement
classe
google.maps.places.PlaceDetailsLocationRequestElement
estende HTMLElement
implementa PlaceDetailsLocationRequestElementOptions
biblioteca "places"
Configura um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados com base em um local. Anexe esse elemento como filho de um PlaceDetailsCompactElement ou PlaceDetailsElement para carregar dados do local especificado. Exemplo:
<gmp-place-details>
<gmp-place-details-location-request
location="37.6207665,-122.4284806"
></gmp-place-details-location-request>
</gmp-place-details> <gmp-place-details-location-request location="lat,lng"> </gmp-place-details-location-request>
const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])Parâmetros:
|
Propriedades | |
|---|---|
location
attr: location |
Tipo de entrada:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalTipo de saída: LatLngAltitude optionalPadrão:
nullO local para renderizar detalhes no elemento Place Details. Normaliza para um
LatLngAltitude.Atributo HTML: location="lat,lng" |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceDetailsLocationRequestElementOptions
interface
google.maps.places.PlaceDetailsLocationRequestElementOptions
implementada por PlaceDetailsLocationRequestElement
Opções para PlaceDetailsLocationRequestElement.
Propriedades | |
|---|---|
location
opcional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalO local para renderizar o lugar. |
Classe PlaceSearchElement
classe
google.maps.places.PlaceSearchElement
estende HTMLElement
implementa PlaceSearchElementOptions
estendida por AdvancedPlaceSearchElement
biblioteca "places"
Mostra os resultados de uma Place Search em uma lista. Anexe um PlaceTextSearchRequestElement ou PlaceNearbySearchRequestElement para especificar a solicitação para renderizar os resultados. Anexe um PlaceContentConfigElement, PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.
Exemplo:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Para usar o elemento Place Search, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-place-search attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" selectable truncation-preferred> </gmp-place-search>
const {PlaceSearchElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])Parâmetros:
|
Propriedades | |
|---|---|
attributionPosition
attr: attribution-position |
Tipo de entrada:
PlaceSearchAttributionPosition optionalTipo de saída: PlaceSearchAttributionPositionPadrão:
PlaceSearchAttributionPosition.TOPA posição do logotipo de atribuição e do botão de declaração legal.
Atributo HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Padrão:
PlaceSearchOrientation.VERTICALA variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML: orientation="value-name" |
places
somente leitura |
Somente leitura. Matriz de objetos Place que contém os IDs, os locais e as janelas de visualização dos lugares renderizados no momento. |
selectable
attr: selectable |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe os itens da lista podem ser selecionados ou não. Se for verdadeiro, os itens da lista serão botões que vão enviar o evento
gmp-select quando clicados. A navegação e a seleção acessíveis pelo teclado também são compatíveis.Atributo HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe for verdadeiro, trunca determinadas linhas de conteúdo para que caibam em uma linha, em vez de serem quebradas.
Atributo HTML: truncation-preferred |
Propriedades CSS | |
|---|---|
--gmp-button-border-color |
Cor da borda do botão "Abrir no Maps". |
--gmp-button-border-radius |
Raio da borda do botão "Abrir no Maps". |
--gmp-button-border-width |
Largura da borda do botão "Abrir no Maps". |
--gmp-card-border-radius |
Raio da borda dos cards de lugar. |
--gmp-dialog-border-radius |
Raio da borda da caixa de diálogo de declaração do Google Maps. |
--gmp-mat-color-info |
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de entrada acessível. |
--gmp-mat-color-negative |
Cor dos elementos da interface com sentimento negativo. Usado para o rótulo "Fechado" no horário de funcionamento de um lugar. |
--gmp-mat-color-neutral-container |
Cor do contêiner para elementos neutros preenchidos da interface. Usado para selos de data de avaliação e formas de marcador de posição de carregamento. |
--gmp-mat-color-on-neutral-container |
Cor do texto e dos ícones em um contêiner neutro. Usado para o texto da data da avaliação e o texto do erro de carregamento. |
--gmp-mat-color-on-secondary-container |
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usada para texto e ícones de botões. |
--gmp-mat-color-on-surface |
Cor para texto e ícones em uma cor de superfície. Usado para títulos e conteúdo de caixas de diálogo. |
--gmp-mat-color-on-surface-variant |
Cor de menor destaque para texto e ícones em uma cor de superfície. Usado para informações sobre lugares. |
--gmp-mat-color-outline-decorative |
Cor do contorno de elementos não interativos. Usado para a borda do contêiner. |
--gmp-mat-color-positive |
Cor dos elementos da interface com sentimento positivo. Usado para o rótulo "Aberto" no horário de funcionamento de um lugar. |
--gmp-mat-color-primary |
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para links, indicador de carregamento e ícones de visão geral. |
--gmp-mat-color-secondary-container |
Cor de preenchimento menos proeminente em relação a uma superfície. Usado para planos de fundo de botões. |
--gmp-mat-color-surface |
Cor para planos de fundo. Usado para planos de fundo de contêineres e caixas de diálogo. |
--gmp-mat-font-body-small |
Usado para informações sobre lugares. |
--gmp-mat-font-family |
Família de fontes base para todo o texto. |
--gmp-mat-font-headline-medium |
Usado para títulos de caixas de diálogo. |
--gmp-mat-font-label-large |
Usado para o conteúdo do botão. |
--gmp-mat-font-title-medium |
Usado para o nome do lugar. |
--gmp-mat-spacing-extra-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-medium |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-star-rating-color |
Cor das estrelas preenchidas em uma classificação por estrelas. |
--gmp-thumbnail-border-radius |
Raio da borda da imagem em miniatura do lugar. |
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font-size |
Dimensiona todo o texto e os ícones no elemento. O valor padrão é 16px. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-load |
function(event)Argumentos:
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado. |
gmp-select |
function(event)Argumentos:
Esse evento é acionado quando um lugar é selecionado na lista. Contém um objeto Place com o ID, o local e a janela de visualização do lugar selecionado. |
Interface PlaceSearchElementOptions
interface
google.maps.places.PlaceSearchElementOptions
estendida por AdvancedPlaceSearchElementOptions
implementada por AdvancedPlaceSearchElement, PlaceSearchElement
Opções para PlaceSearchElement.
Propriedades | |
|---|---|
attributionPosition
opcional |
Tipo:
PlaceSearchAttributionPosition optionalConsulte PlaceSearchElement.attributionPosition. |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
orientation
opcional |
Tipo:
PlaceSearchOrientation optionalConsulte PlaceSearchElement.orientation. |
selectable
opcional |
Tipo:
boolean optional |
truncationPreferred
opcional |
Tipo:
boolean optionalConsulte PlaceSearchElement.truncationPreferred. |
Classe AdvancedPlaceSearchElement
classe
google.maps.places.AdvancedPlaceSearchElement
estende PlaceSearchElement, HTMLElement
implementa AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
biblioteca "places"
Mostra os resultados de uma pesquisa avançada de Place Search em uma lista. Anexe um PlaceTextSearchRequestElement ou PlaceNearbySearchRequestElement para especificar a solicitação para renderizar os resultados. Anexe um PlaceStandardContentElement, PlaceAllContentElement ou <template slot="details-item"> para especificar qual conteúdo renderizar.
Exemplo:
<gmp-advanced-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<template slot="details-item">
<gmp-place-media lightbox-preferred></gmp-place-media>
</template>
</gmp-advanced-place-search> Para usar o elemento Pesquisa de Lugar Avançada, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-advanced-place-search attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" selectable truncation-preferred> </gmp-advanced-place-search>
const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
AdvancedPlaceSearchElement |
AdvancedPlaceSearchElement([options])Parâmetros:
|
Propriedades | |
|---|---|
attributionPosition
attr: attribution-position |
Tipo de entrada:
PlaceSearchAttributionPosition optionalTipo de saída: PlaceSearchAttributionPositionPadrão:
PlaceSearchAttributionPosition.TOPA posição do logotipo de atribuição e do botão de declaração legal.
Atributo HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Padrão:
PlaceSearchOrientation.VERTICALA variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML: orientation="value-name" |
selectable
attr: selectable |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe os itens da lista podem ser selecionados ou não. Se for verdadeiro, os itens da lista serão botões que vão enviar o evento
gmp-select quando clicados. A navegação e a seleção acessíveis pelo teclado também são compatíveis.Atributo HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe for verdadeiro, trunca determinadas linhas de conteúdo para que caibam em uma linha, em vez de serem quebradas.
Atributo HTML: truncation-preferred |
Herdado:
places
| |
Slots | |
|---|---|
details-item |
O modelo HTML que contém Place Widgets gmp-place para renderizar cada lugar nos resultados da pesquisa. |
Propriedades CSS | |
|---|---|
--gmp-button-border-color |
Cor da borda do botão "Abrir no Maps". |
--gmp-button-border-radius |
Raio da borda do botão "Abrir no Maps". |
--gmp-button-border-width |
Largura da borda do botão "Abrir no Maps". |
--gmp-card-border-radius |
Raio da borda dos cards de lugar. |
--gmp-dialog-border-radius |
Raio da borda da caixa de diálogo de declaração do Google Maps. |
--gmp-mat-color-info |
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de entrada acessível. |
--gmp-mat-color-negative |
Cor dos elementos da interface com sentimento negativo. Usado para o rótulo "Fechado" no horário de funcionamento de um lugar. |
--gmp-mat-color-neutral-container |
Cor do contêiner para elementos neutros preenchidos da interface. Usado para selos de data de avaliação e formas de marcador de posição de carregamento. |
--gmp-mat-color-on-neutral-container |
Cor do texto e dos ícones em um contêiner neutro. Usado para o texto da data da avaliação e o texto do erro de carregamento. |
--gmp-mat-color-on-secondary-container |
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usada para texto e ícones de botões. |
--gmp-mat-color-on-surface |
Cor para texto e ícones em uma cor de superfície. Usado para títulos e conteúdo de caixas de diálogo. |
--gmp-mat-color-on-surface-variant |
Cor de menor destaque para texto e ícones em uma cor de superfície. Usado para informações sobre lugares. |
--gmp-mat-color-outline-decorative |
Cor do contorno de elementos não interativos. Usado para a borda do contêiner. |
--gmp-mat-color-positive |
Cor dos elementos da interface com sentimento positivo. Usado para o rótulo "Aberto" no horário de funcionamento de um lugar. |
--gmp-mat-color-primary |
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para links, indicador de carregamento e ícones de visão geral. |
--gmp-mat-color-secondary-container |
Cor de preenchimento menos proeminente em relação a uma superfície. Usado para planos de fundo de botões. |
--gmp-mat-color-surface |
Cor para planos de fundo. Usado para planos de fundo de contêineres e caixas de diálogo. |
--gmp-mat-font-body-small |
Usado para informações sobre lugares. |
--gmp-mat-font-family |
Família de fontes base para todo o texto. |
--gmp-mat-font-headline-medium |
Usado para títulos de caixas de diálogo. |
--gmp-mat-font-label-large |
Usado para o conteúdo do botão. |
--gmp-mat-font-title-medium |
Usado para o nome do lugar. |
--gmp-mat-spacing-extra-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-medium |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-star-rating-color |
Cor das estrelas preenchidas em uma classificação por estrelas. |
--gmp-thumbnail-border-radius |
Raio da borda da imagem em miniatura do lugar. |
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font-size |
Dimensiona todo o texto e os ícones no elemento. O valor padrão é 16px. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-load |
function(event)Argumentos:
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado. |
gmp-select |
function(event)Argumentos:
Esse evento é acionado quando um lugar é selecionado na lista. Contém um objeto Place com o ID, o local e a janela de visualização do lugar selecionado. |
Interface AdvancedPlaceSearchElementOptions
interface
google.maps.places.AdvancedPlaceSearchElementOptions
estende PlaceSearchElementOptions
implementada por AdvancedPlaceSearchElement
Opções para AdvancedPlaceSearchElement.
Propriedades | |
|---|---|
attributionPosition
opcional |
Tipo:
PlaceSearchAttributionPosition optionalConsulte PlaceSearchElement.attributionPosition. |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
orientation
opcional |
Tipo:
PlaceSearchOrientation optionalConsulte PlaceSearchElement.orientation. |
selectable
opcional |
Tipo:
boolean optional |
truncationPreferred
opcional |
Tipo:
boolean optionalConsulte PlaceSearchElement.truncationPreferred. |
Classe AdvancedPlaceListElement
classe
google.maps.places.AdvancedPlaceListElement
estende HTMLElement
implementa AdvancedPlaceListElementOptions
biblioteca "places"
Mostra os resultados de uma Place Search em uma lista. Anexe um ou mais PlaceDetailsPlaceRequestElement ou defina a propriedade places para especificar os lugares que serão mostrados. Anexe um PlaceStandardContentElement ou PlaceAllContentElement para especificar qual conteúdo renderizar.
Exemplo:
<gmp-advanced-place-list>
<gmp-place-details-place-request
place="PLACE_ID"
</gmp-place-details-place-request>
<template slot="details-item">
<gmp-place-media lightbox-preferred></gmp-place-media>
</template>
</gmp-advanced-place-list> Para usar o elemento de lista de lugares avançado, ative a API Kit de Interface do Places no seu projeto no console do Google Cloud.
<gmp-advanced-place-list attribution-position="value-name" internal-usage-attribution-ids="space separated strings" orientation="value-name" places="space separated strings" selectable truncation-preferred> </gmp-advanced-place-list>
const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
AdvancedPlaceListElement |
AdvancedPlaceListElement([options])Parâmetros:
|
Propriedades | |
|---|---|
attributionPosition
attr: attribution-position |
Tipo de entrada:
PlaceSearchAttributionPosition optionalTipo de saída: PlaceSearchAttributionPositionPadrão:
PlaceSearchAttributionPosition.TOPA posição do logotipo de atribuição e do botão de declaração legal.
Atributo HTML: attribution-position="value-name" |
internalUsageAttributionIds
attr: internal-usage-attribution-ids |
Identificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS.
Atributo HTML: internal-usage-attribution-ids="space separated strings" |
orientation
attr: orientation |
Padrão:
PlaceSearchOrientation.VERTICALA variante de orientação (vertical ou horizontal) do elemento.
Atributo HTML: orientation="value-name" |
places
attr: places |
Lista de objetos Place que contêm os IDs que precisam ser mostrados nesse elemento. Nem todos os lugares definidos na propriedade places serão mostrados se não puderem ser renderizados(por exemplo, ID inválido, erro de solicitação de rede etc.). A propriedade places pode ser lida para recuperar os lugares mostrados no momento.
Atributo HTML: places="space separated strings" |
selectable
attr: selectable |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe os itens da lista podem ser selecionados ou não. Se for verdadeiro, os itens da lista serão botões que vão enviar o evento
gmp-select quando clicados. A navegação e a seleção acessíveis pelo teclado também são compatíveis.Atributo HTML: selectable |
truncationPreferred
attr: truncation-preferred |
Tipo de entrada:
boolean optionalTipo de saída: booleanPadrão:
falseSe for verdadeiro, trunca determinadas linhas de conteúdo para que caibam em uma linha, em vez de serem quebradas.
Atributo HTML: truncation-preferred |
Slots | |
|---|---|
details-item |
O modelo HTML que contém Place Widgets gmp-place para renderizar cada lugar na lista. |
Propriedades CSS | |
|---|---|
--gmp-button-border-color |
Cor da borda do botão "Abrir no Maps". |
--gmp-button-border-radius |
Raio da borda do botão "Abrir no Maps". |
--gmp-button-border-width |
Largura da borda do botão "Abrir no Maps". |
--gmp-card-border-radius |
Raio da borda dos cards de lugar. |
--gmp-dialog-border-radius |
Raio da borda da caixa de diálogo de declaração do Google Maps. |
--gmp-mat-color-info |
Cor dos elementos da interface com sentimento informativo. Usado para o ícone de entrada acessível. |
--gmp-mat-color-negative |
Cor dos elementos da interface com sentimento negativo. Usado para o rótulo "Fechado" no horário de funcionamento de um lugar. |
--gmp-mat-color-neutral-container |
Cor do contêiner para elementos neutros preenchidos da interface. Usado para selos de data de avaliação e formas de marcador de posição de carregamento. |
--gmp-mat-color-on-neutral-container |
Cor do texto e dos ícones em um contêiner neutro. Usado para o texto da data da avaliação e o texto do erro de carregamento. |
--gmp-mat-color-on-secondary-container |
Cor do texto e dos ícones em contraste com a cor do contêiner secundário. Usada para texto e ícones de botões. |
--gmp-mat-color-on-surface |
Cor para texto e ícones em uma cor de superfície. Usado para títulos e conteúdo de caixas de diálogo. |
--gmp-mat-color-on-surface-variant |
Cor de menor destaque para texto e ícones em uma cor de superfície. Usado para informações sobre lugares. |
--gmp-mat-color-outline-decorative |
Cor do contorno de elementos não interativos. Usado para a borda do contêiner. |
--gmp-mat-color-positive |
Cor dos elementos da interface com sentimento positivo. Usado para o rótulo "Aberto" no horário de funcionamento de um lugar. |
--gmp-mat-color-primary |
Cor do texto e dos ícones interativos em relação à cor da superfície. Usado para links, indicador de carregamento e ícones de visão geral. |
--gmp-mat-color-secondary-container |
Cor de preenchimento menos proeminente em relação a uma superfície. Usado para planos de fundo de botões. |
--gmp-mat-color-surface |
Cor para planos de fundo. Usado para planos de fundo de contêineres e caixas de diálogo. |
--gmp-mat-font-body-small |
Usado para informações sobre lugares. |
--gmp-mat-font-family |
Família de fontes base para todo o texto. |
--gmp-mat-font-headline-medium |
Usado para títulos de caixas de diálogo. |
--gmp-mat-font-label-large |
Usado para o conteúdo do botão. |
--gmp-mat-font-title-medium |
Usado para o nome do lugar. |
--gmp-mat-spacing-extra-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-large |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-medium |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-mat-spacing-small |
Usado para espaçamento dentro do elemento, como a margem e o padding ao redor do texto. |
--gmp-star-rating-color |
Cor das estrelas preenchidas em uma classificação por estrelas. |
--gmp-thumbnail-border-radius |
Raio da borda da imagem em miniatura do lugar. |
background-color |
Substitui a cor do plano de fundo do elemento. |
border |
Substitui a borda do elemento. |
border-radius |
Substitui o raio da borda do elemento. |
color-scheme |
Indica em qual esquema de cores esse elemento pode ser renderizado. Consulte a documentação do color-scheme para mais detalhes. O valor padrão é color-scheme: light dark. |
font-size |
Dimensiona todo o texto e os ícones no elemento. O valor padrão é 16px. |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Esse evento é acionado quando uma solicitação ao back-end é negada (por exemplo, chave de API incorreta). Esse evento não é propagado. |
gmp-load |
function(event)Argumentos:
Esse evento é acionado quando o elemento carrega e renderiza o conteúdo. Esse evento não é propagado. |
gmp-select |
function(event)Argumentos:
Esse evento é acionado quando um lugar é selecionado na lista. Contém um objeto Place com o ID, o local e a janela de visualização do lugar selecionado. |
AdvancedPlaceListElementOptions
interface
google.maps.places.AdvancedPlaceListElementOptions
implementada por AdvancedPlaceListElement
Opções para AdvancedPlaceListElement.
Propriedades | |
|---|---|
attributionPosition
opcional |
Tipo:
PlaceSearchAttributionPosition optionalConsulte PlaceSearchElement.attributionPosition. |
internalUsageAttributionIds
opcional |
Tipo:
Iterable<string> optionalIdentificadores usados para atribuir chamadas a pacotes específicos ou bibliotecas de OSS. |
orientation
opcional |
Tipo:
PlaceSearchOrientation optionalConsulte PlaceSearchElement.orientation. |
places
opcional |
Consulte AdvancedPlaceListElement.places. |
selectable
opcional |
Tipo:
boolean optional |
truncationPreferred
opcional |
Tipo:
boolean optionalConsulte PlaceSearchElement.truncationPreferred. |
Constantes de PlaceSearchAttributionPosition
constantes
google.maps.places.PlaceSearchAttributionPosition
biblioteca "places"
Posições de atribuição para PlaceSearchElement.
Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo PlaceSearchAttributionPositionString.
const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");
Constantes | |
|---|---|
BOTTOM |
Atribuição na parte de baixo do PlaceSearchElement |
TOP |
Atribuição na parte de cima do PlaceSearchElement |
Constantes de PlaceSearchOrientation
constantes
google.maps.places.PlaceSearchOrientation
biblioteca "places"
Variantes de orientação para PlaceSearchElement.
Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo PlaceSearchOrientationString.
const {PlaceSearchOrientation} = await google.maps.importLibrary("places");
Constantes | |
|---|---|
HORIZONTAL |
Orientação horizontal. |
VERTICAL |
Orientação vertical. |
Classe PlaceSelectEvent
classe
google.maps.places.PlaceSelectEvent
estende Event
biblioteca "places"
Esse evento é disparado quando um lugar é selecionado em uma lista. Acesse a seleção com event.place.
const {PlaceSelectEvent} = await google.maps.importLibrary("places");
Propriedades | |
|---|---|
place
somente leitura |
Tipo:
PlaceO lugar selecionado. |
Classe PlaceNearbySearchRequestElement
classe
google.maps.places.PlaceNearbySearchRequestElement
estende HTMLElement
implementa PlaceNearbySearchRequestElementOptions
biblioteca "places"
Configura um PlaceSearchElement para carregar resultados com base em uma solicitação do Nearby Search. A propriedade locationRestriction é obrigatória para que o elemento de pesquisa seja carregado. Todas as outras propriedades configuradas serão ignoradas se locationRestriction não estiver definido. Anexe esse elemento como filho de um PlaceSearchElement para carregar os resultados. Exemplo:
<gmp-place-search>
<gmp-place-nearby-search-request
location-restriction="RADIUS@LAT,LNG"
></gmp-place-nearby-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> <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="value-name"> </gmp-place-nearby-search-request>
const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])Parâmetros:
|
Propriedades | |
|---|---|
excludedPrimaryTypes
attr: excluded-primary-types |
Padrão:
nullTipos de lugares principais excluídos.
Atributo HTML: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." |
excludedTypes
attr: excluded-types |
Padrão:
nullTipos de lugar excluídos.
Atributo HTML: excluded-types="excluded-type1 excluded-type2..." |
futureOpeningBusinessesIncluded |
Tipo de entrada:
boolean optionalTipo de saída: boolean optionalInclua previsões de lugares para empresas que ainda não estão abertas, mas que devem abrir no futuro. |
includedPrimaryTypes
attr: included-primary-types |
Padrão:
nullTipo de lugar principal incluído.
Atributo HTML: included-primary-types="included-primary-type1 included-primary-type2..." |
includedTypes
attr: included-types |
Padrão:
nullTipo de lugar incluído.
Atributo HTML: included-types="included-type1 included-type2..." |
locationRestriction
attr: location-restriction |
Padrão:
nullA região a ser pesquisada. Normaliza para um
Circle.Atributo HTML: location-restriction="radius@lat,lng" |
maxResultCount
attr: max-result-count |
Tipo de entrada:
number optionalTipo de saída: number optionalPadrão:
nullNúmero máximo de resultados a serem retornados.
Atributo HTML: max-result-count="number" |
rankPreference
attr: rank-preference |
Tipo de entrada:
SearchNearbyRankPreference optionalTipo de saída: SearchNearbyRankPreference optionalPadrão:
nullComo os resultados serão classificados na resposta.
Atributo HTML: rank-preference="value-name" |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceNearbySearchRequestElementOptions
interface
google.maps.places.PlaceNearbySearchRequestElementOptions
implementada por PlaceNearbySearchRequestElement
Opções para PlaceNearbySearchRequestElement.
Propriedades | |
|---|---|
excludedPrimaryTypes
opcional |
Tipo:
Array<string> optionalTipos de lugares principais excluídos. Consulte PlaceNearbySearchRequestElement.excludedPrimaryTypes e SearchNearbyRequest.excludedPrimaryTypes para mais detalhes. |
excludedTypes
opcional |
Tipo:
Array<string> optionalTipos de lugar excluídos. Consulte PlaceNearbySearchRequestElement.excludedTypes e SearchNearbyRequest.excludedTypes para mais detalhes. |
futureOpeningBusinessesIncluded
opcional |
Tipo:
boolean optionalInclua previsões de lugares para empresas que ainda não estão abertas, mas que devem abrir no futuro. |
includedPrimaryTypes
opcional |
Tipo:
Array<string> optionalTipos de lugar principais incluídos. Consulte PlaceNearbySearchRequestElement.includedPrimaryTypes e SearchNearbyRequest.includedPrimaryTypes para mais detalhes. |
includedTypes
opcional |
Tipo:
Array<string> optionalTipos de lugar incluídos. Consulte PlaceNearbySearchRequestElement.includedTypes e SearchNearbyRequest.includedTypes para mais detalhes. |
locationRestriction
opcional |
Tipo:
Circle|CircleLiteral optionalA região a ser pesquisada. Consulte PlaceNearbySearchRequestElement.locationRestriction e SearchNearbyRequest.locationRestriction para mais detalhes. |
maxResultCount
opcional |
Tipo:
number optionalNúmero máximo de resultados a serem retornados. Consulte PlaceNearbySearchRequestElement.maxResultCount e SearchNearbyRequest.maxResultCount para mais detalhes. |
rankPreference
opcional |
Tipo:
SearchNearbyRankPreference optionalComo os resultados serão classificados na resposta. Consulte PlaceNearbySearchRequestElement.rankPreference e SearchNearbyRankPreference para mais detalhes. |
Classe PlaceTextSearchRequestElement
classe
google.maps.places.PlaceTextSearchRequestElement
estende HTMLElement
implementa PlaceTextSearchRequestElementOptions
biblioteca "places"
Configura um PlaceSearchElement para carregar resultados com base em uma solicitação de Text Search. A propriedade textQuery é obrigatória para que o elemento de pesquisa seja carregado. Todas as outras propriedades configuradas serão ignoradas se textQuery não estiver definido. Anexe esse elemento como filho de um PlaceSearchElement para carregar os resultados. Exemplo:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="number" included-type="type" is-open-now location-bias="lat,lng" location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="value-name" text-query="string" use-strict-type-filtering> </gmp-place-text-search-request>
const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])Parâmetros:
|
Propriedades | |
|---|---|
evConnectorTypes
attr: ev-connector-types |
Padrão:
nullA lista de tipos de conector de VE preferidos.
Atributo HTML: ev-connector-types="ev-connector-type1 ev-connector-type2..." |
evMinimumChargingRateKw
attr: ev-minimum-charging-rate-kw |
Tipo de entrada:
number optionalTipo de saída: number optionalPadrão:
nullTaxa de carregamento mínima necessária em quilowatts.
Atributo HTML: ev-minimum-charging-rate-kw="number" |
futureOpeningBusinessesIncluded |
Tipo de entrada:
boolean optionalTipo de saída: boolean optionalInclua previsões de lugares para empresas que ainda não estão abertas, mas que devem abrir no futuro. |
includedType
attr: included-type |
Tipo de entrada:
string optionalTipo de saída: string optionalPadrão:
nullO tipo de lugar solicitado.
Atributo HTML: included-type="type" |
isOpenNow
attr: is-open-now |
Tipo de entrada:
boolean optionalTipo de saída: boolean optionalPadrão:
nullUsado para restringir a pesquisa a lugares que estão abertos no momento.
Atributo HTML: is-open-now |
locationBias
attr: location-bias |
Tipo de entrada:
LocationBias optionalTipo de saída: LatLngAltitude|LatLngBounds|Circle|string optionalPadrão:
nullViés de local para a pesquisa.
Atributo HTML:
|
locationRestriction
attr: location-restriction |
Padrão:
nullRestrição de local para a pesquisa. Normaliza para um
LatLngBounds.Atributo HTML: location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng" |
maxResultCount
attr: max-result-count |
Tipo de entrada:
number optionalTipo de saída: number optionalPadrão:
nullNúmero máximo de resultados a serem retornados.
Atributo HTML: max-result-count="number" |
minRating
attr: min-rating |
Tipo de entrada:
number optionalTipo de saída: number optionalPadrão:
nullFiltra os resultados com uma avaliação média de usuários estritamente menor que esse limite.
Atributo HTML: min-rating="number" |
priceLevels
attr: price-levels |
Padrão:
nullUsado para restringir a pesquisa a lugares marcados com determinados níveis de preço.
Atributo HTML: price-levels="price-level1 price-level2..." |
rankPreference
attr: rank-preference |
Tipo de entrada:
SearchByTextRankPreference optionalTipo de saída: SearchByTextRankPreference optionalPadrão:
nullComo os resultados serão classificados na resposta.
Atributo HTML: rank-preference="value-name" |
textQuery
attr: text-query |
Tipo de entrada:
string optionalTipo de saída: string optionalPadrão:
nullA consulta de texto para Text Search.
Atributo HTML: text-query="string" |
useStrictTypeFiltering
attr: use-strict-type-filtering |
Tipo de entrada:
boolean optionalTipo de saída: boolean optionalPadrão:
nullUsado para definir a filtragem de tipo estrita para "includedType".
Atributo HTML: use-strict-type-filtering |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceTextSearchRequestElementOptions
interface
google.maps.places.PlaceTextSearchRequestElementOptions
implementada por PlaceTextSearchRequestElement
Opções para PlaceTextSearchRequestElement.
Propriedades | |
|---|---|
evConnectorTypes
opcional |
Tipo:
Array<EVConnectorType> optionalA lista de tipos de conector de VE preferidos. Consulte SearchByTextRequest.evSearchOptions e PlaceTextSearchRequestElement.evConnectorTypes para mais detalhes. |
evMinimumChargingRateKw
opcional |
Tipo:
number optionalTaxa de carregamento mínima necessária em quilowatts. Consulte SearchByTextRequest.evSearchOptions e PlaceTextSearchRequestElement.evMinimumChargingRateKw para mais detalhes. |
futureOpeningBusinessesIncluded
opcional |
Tipo:
boolean optionalInclua previsões de lugares para empresas que ainda não estão abertas, mas que devem abrir no futuro. |
includedType
opcional |
Tipo:
string optionalO tipo de lugar solicitado. Consulte SearchByTextRequest.includedType e PlaceTextSearchRequestElement.includedType para mais detalhes. |
isOpenNow
opcional |
Tipo:
boolean optionalUsado para restringir a pesquisa a lugares que estão abertos no momento. Consulte SearchByTextRequest.isOpenNow e PlaceTextSearchRequestElement.isOpenNow para mais detalhes. |
locationBias
opcional |
Tipo:
LocationBias optionalViés de local para a pesquisa. Consulte SearchByTextRequest.locationBias e PlaceTextSearchRequestElement.locationBias para mais detalhes. |
locationRestriction
opcional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalRestrição de local para a pesquisa. Consulte SearchByTextRequest.locationRestriction e PlaceTextSearchRequestElement.locationRestriction para mais detalhes. |
maxResultCount
opcional |
Tipo:
number optionalNúmero máximo de resultados a serem retornados. Consulte SearchByTextRequest.maxResultCount e PlaceTextSearchRequestElement.maxResultCount para mais detalhes. |
minRating
opcional |
Tipo:
number optionalFiltra os resultados com uma avaliação média de usuários estritamente menor que esse limite. Consulte SearchByTextRequest.minRating e PlaceTextSearchRequestElement.minRating para mais detalhes. |
priceLevels
opcional |
Tipo:
Array<PriceLevel> optionalUsado para restringir a pesquisa a lugares marcados com determinados níveis de preço. Consulte SearchByTextRequest.priceLevels e PlaceTextSearchRequestElement.priceLevels para mais detalhes. |
rankPreference
opcional |
Tipo:
SearchByTextRankPreference optionalComo os resultados serão classificados na resposta. Consulte SearchByTextRequest.rankPreference e PlaceTextSearchRequestElement.rankPreference para mais detalhes. |
textQuery
opcional |
Tipo:
string optionalA consulta de texto para Text Search. Consulte SearchByTextRequest.textQuery e PlaceTextSearchRequestElement.textQuery para mais detalhes. |
useStrictTypeFiltering
opcional |
Tipo:
boolean optionalUsado 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
estende MVCObject
biblioteca "places"
Um widget que fornece previsões de lugares com base na entrada de texto do usuário. Ele se anexa a um elemento de entrada do tipo text e detecta a entrada de texto nesse campo. A lista de previsões é apresentada como uma lista suspensa e é atualizada conforme o texto é inserido.
const {Autocomplete} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
Autocomplete |
Autocomplete(inputField[, opts])Parâmetros:
Cria uma nova instância de Autocomplete que se anexa ao campo de texto de entrada especificado com as opções fornecidas. |
Métodos | |
|---|---|
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>|undefinedRetorna os campos que serão incluídos para o lugar na resposta de detalhes quando eles forem recuperados. Para uma lista de campos, consulte PlaceResult. |
getPlace |
getPlace()Parâmetros: nenhum
Valor de retorno:
PlaceResult o lugar selecionado pelo usuário.Retorna os detalhes do lugar selecionado pelo usuário se eles forem recuperados. Caso contrário, retorna um objeto Place de stub, com a propriedade name definida como o valor atual do campo de entrada. |
setBounds |
setBounds(bounds)Parâmetros:
Valor de retorno: nenhum
Define a área preferencial para retornar resultados de lugares. Os resultados são direcionados, mas não restritos, a essa área. |
setComponentRestrictions |
setComponentRestrictions(restrictions)Parâmetros:
Valor de retorno: nenhum
Define as restrições do componente. As restrições de componente são usadas para limitar as previsões apenas àquelas dentro do componente pai. Por exemplo, o país. |
setFields |
setFields(fields)Parâmetros:
Valor de retorno: nenhum
Define os campos a serem incluídos para o lugar na resposta de detalhes quando eles forem recuperados. Para uma lista de campos, consulte PlaceResult. |
setOptions |
setOptions(options)Parâmetros:
Valor de retorno: nenhum
|
setTypes |
setTypes(types)Parâmetros:
Valor de retorno: nenhum
Define os tipos de previsões que serão retornados. Para ver os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos os tipos serão retornados. |
Herdado:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Eventos | |
|---|---|
place_changed |
function()Argumentos: nenhum
Esse evento é acionado quando um PlaceResult é disponibilizado para um lugar selecionado pelo usuário. Se o usuário inserir o nome de um lugar que não foi sugerido pelo controle e pressionar a tecla Enter, ou se uma solicitação do Place Details falhar, o PlaceResult vai conter a entrada do usuário na propriedade name, sem outras propriedades definidas. |
AutocompleteOptions
interface
google.maps.places.AutocompleteOptions
As opções que podem ser definidas em um objeto Autocomplete.
Propriedades | |
|---|---|
bounds
opcional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalA área em que os lugares serão pesquisados. |
componentRestrictions
opcional |
Tipo:
ComponentRestrictions optionalAs restrições do componente. As restrições de componente são usadas para limitar as previsões apenas àquelas dentro do componente pai. Por exemplo, o país. |
fields
opcional |
Tipo:
Array<string> optionalCampos a serem incluídos para o lugar na resposta de detalhes quando os detalhes forem recuperados, que serão cobrados. Se ['ALL'] for transmitido, todos os campos disponíveis vão ser retornados e faturados, o que não é recomendado para implantações de produção. Para uma lista de campos, consulte PlaceResult. Os campos aninhados podem ser especificados com caminhos de ponto (por exemplo, "geometry.location"). O padrão é ['ALL']. |
opcional |
Tipo:
boolean optionalSe é para recuperar apenas IDs de lugar. O PlaceResult disponibilizado quando o evento place_changed é acionado terá apenas os campos ID de lugar, types e name, com o ID de lugar, types e description retornados pelo serviço Autocomplete. Essa configuração está desativada por padrão. |
strictBounds
opcional |
Tipo:
boolean optionalUm valor booleano que indica que o widget do Autocomplete deve retornar apenas os lugares que estão dentro dos limites dele no momento em que a consulta é enviada. Definir strictBounds como false (que é o padrão) vai fazer com que os resultados sejam direcionados, mas não restritos, a lugares contidos nos limites. |
types
opcional |
Tipo:
Array<string> optionalOs tipos de previsões que serão retornados. Para ver os tipos compatíveis, consulte o guia do desenvolvedor. Se nenhum tipo for especificado, todos os tipos serão retornados. |
Classe SearchBox
classe
google.maps.places.SearchBox
estende MVCObject
biblioteca "places"
Um widget que fornece previsões de consulta com base na entrada de texto de um usuário. Ele se anexa a um elemento de entrada do tipo text e detecta a entrada de texto nesse campo. A lista de previsões é apresentada como uma lista suspensa e é atualizada conforme o texto é inserido.
const {SearchBox} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
SearchBox |
SearchBox(inputField[, opts])Parâmetros:
Cria uma nova instância de SearchBox que se anexa ao campo de texto de entrada especificado com as opções fornecidas. |
Métodos | |
|---|---|
getBounds |
getBounds()Parâmetros: nenhum
Valor de retorno:
LatLngBounds|undefinedRetorna os limites que influenciam as previsões de consulta. |
getPlaces |
getPlaces()Parâmetros: nenhum
Valor de retorno:
Array<PlaceResult>|undefinedRetorna a consulta selecionada pelo usuário para ser usada com o evento places_changed. |
setBounds |
setBounds(bounds)Parâmetros:
Valor de retorno: nenhum
Define a região a ser usada para influenciar as previsões de consulta. Os resultados serão direcionados para essa área, mas não serão totalmente restritos a ela. |
Herdado:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Eventos | |
|---|---|
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.
Propriedades | |
|---|---|
bounds
opcional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalA área para a qual as previsões de consulta serão direcionadas. As previsões são direcionadas, mas não restritas, a consultas que segmentam esses limites. |
Classe PlaceContextualElement
classe
google.maps.places.PlaceContextualElement
estende HTMLElement
implementa PlaceContextualElementOptions
biblioteca "places"
Um widget que usa o token de contexto para mostrar uma visualização contextual da resposta do embasamento com o Google Maps.
<gmp-place-contextual context-token="string"> </gmp-place-contextual>
const {PlaceContextualElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])Parâmetros:
|
Propriedades | |
|---|---|
contextToken
attr: context-token |
Tipo de entrada:
string optionalTipo de saída: string optionalO token de contexto.
Atributo HTML: context-token="string" |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceContextualElementOptions
interface
google.maps.places.PlaceContextualElementOptions
implementada por PlaceContextualElement
Opções para PlaceContextualElement.
Propriedades | |
|---|---|
contextToken
opcional |
Tipo:
string optionalO token de contexto fornecido pela resposta do embasamento com o Google Maps. |
Classe PlaceContextualListConfigElement
classe
google.maps.places.PlaceContextualListConfigElement
estende HTMLElement
implementa PlaceContextualListConfigElementOptions
biblioteca "places"
Um elemento HTML que configura as opções para a visualização em lista do elemento contextual de lugar.
<gmp-place-contextual-list-config layout="value-name" map-hidden> </gmp-place-contextual-list-config>
const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");
Construtor | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])Parâmetros:
|
Propriedades | |
|---|---|
layout
attr: layout |
O layout.
Atributo HTML: layout="value-name" |
mapHidden
attr: map-hidden |
Tipo de entrada:
boolean optionalTipo de saída: booleanSe o mapa está oculto.
Atributo HTML: map-hidden |
Métodos | |
|---|---|
Herdado:
addEventListener,
removeEventListener
|
Interface PlaceContextualListConfigElementOptions
interface
google.maps.places.PlaceContextualListConfigElementOptions
implementada por PlaceContextualListConfigElement
Opções para PlaceContextualListConfigElement.
Propriedades | |
|---|---|
layout
opcional |
Tipo:
PlaceContextualListLayout optionalO layout. |
mapHidden
opcional |
Tipo:
boolean optionalPadrão:
falseVerdadeiro se o mapa precisar ser ocultado. |
Constantes de PlaceContextualListLayout
constantes
google.maps.places.PlaceContextualListLayout
biblioteca "places"
A lista de layouts que o elemento contextual de lugar aceita para a visualização em lista.
Essas constantes também podem ser usadas como strings. No TypeScript, os literais de string são definidos pelo tipo PlaceContextualListLayoutString.
const {PlaceContextualListLayout} = await google.maps.importLibrary("places");
Constantes | |
|---|---|
COMPACT |
Layout de lista compacta: os itens da lista são renderizados como links em uma única linha, com estouros em uma lista suspensa. |
VERTICAL |
Layout de lista vertical: os itens são renderizados como cards em uma lista vertical. |