Clase PlaceAutocompleteElement
Clase google.maps.places.PlaceAutocompleteElement
PlaceAutocompleteElement es una subclase de HTMLElement que proporciona un componente de IU para la API de Place Autocomplete.
PlaceAutocompleteElement usa automáticamente AutocompleteSessionToken de forma interna para agrupar las fases de consulta y selección de la búsqueda con autocompletado de un usuario.
La primera llamada a Place.fetchFields en un Place que devuelve PlacePrediction.toPlace incluirá automáticamente el token de sesión que se usó para recuperar el PlacePrediction.
Consulta https://developers.google.com/maps/documentation/places/web-service/place-session-tokens para obtener más detalles sobre el funcionamiento de los tokens de sesión.
Elemento personalizado:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceAutocompleteElementOptions.
Para acceder, llama al const {PlaceAutocompleteElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options)Parámetros:
|
Propiedades | |
|---|---|
includedPrimaryTypes |
Tipo:
Array<string> optionalIncluye el tipo de lugar principal (por ejemplo, "restaurant" o "gas_station").
Solo se devuelve un lugar si su tipo principal se incluye en esta lista. Se pueden especificar hasta 5 valores. Si no se especifica ningún tipo, se devuelven todos los tipos de Place. Atributo HTML:
|
includedRegionCodes |
Tipo:
Array<string> optionalSolo incluye resultados en las regiones especificadas, que se indican con hasta 15 códigos de región de dos caracteres del CLDR. Un conjunto vacío no restringirá los resultados. Si se configuran
locationRestriction y includedRegionCodes, los resultados se ubicarán en el área de intersección.Atributo HTML:
|
locationBias |
Tipo:
LocationBias optionalEs un límite o una sugerencia flexible que se usa cuando se buscan lugares. |
locationRestriction |
Tipo:
LocationRestriction optionalSon los límites para restringir los resultados de la búsqueda. |
name |
Tipo:
string optionalEs el nombre que se usará para el elemento de entrada. Consulta https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para obtener más detalles. Sigue el mismo comportamiento que el atributo name para las entradas. Ten en cuenta que este es el nombre que se usará cuando se envíe un formulario. Consulta https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para obtener más detalles.
Atributo HTML:
|
origin |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalEs el origen desde el que se calcula la distancia. Si no se especifica, no se calcula la distancia. Si se proporciona la altitud, no se usa en el cálculo.
Atributo HTML:
|
placeholder |
Tipo:
stringEs el texto del marcador de posición que se mostrará en el elemento de entrada. |
requestedLanguage |
Tipo:
string optionalEs un identificador del idioma en el que se deben devolver los resultados, si es posible. Es posible que los resultados en el idioma seleccionado tengan una clasificación más alta, pero las sugerencias no se restringen a este idioma. Consulta la lista de idiomas compatibles.
Atributo HTML:
|
requestedRegion |
Tipo:
string optionalEs un código de región que se usa para dar formato a los resultados y filtrarlos. No restringe las sugerencias a este país. El código de región acepta un valor de dos caracteres de ccTLD ("dominio de nivel superior"). La mayoría de los códigos ccTLD son idénticos a los códigos ISO 3166-1, con algunas excepciones notables. Por ejemplo, el ccTLD del Reino Unido es "uk" (
.co.uk), mientras que su código ISO 3166-1 es "gb" (técnicamente para la entidad "Reino Unido de Gran Bretaña e Irlanda del Norte").Atributo HTML:
|
unitSystem |
Tipo:
UnitSystem optionalEs el sistema de unidades que se usa para mostrar las distancias. Si no se especifica, el sistema de unidades se determina según requestedRegion.
Atributo HTML:
|
value |
Tipo:
stringEs el valor del elemento de entrada. |
Ranuras | |
|---|---|
prediction-item-icon |
Este espacio acepta exactamente un elemento <template> para renderizarlo como el ícono que se muestra junto al elemento de predicción. |
Piezas | |
|---|---|
input |
Es el elemento de entrada para el elemento de autocompletado. |
prediction-item |
Es un elemento del menú desplegable de predicciones que representa una sola predicción. |
prediction-item-icon |
Icono que aparece a la izquierda de cada elemento de la lista de predicciones. |
prediction-item-main-text |
Es una parte de prediction-item que es el texto principal de la predicción. En el caso de las ubicaciones geográficas, contiene un nombre de lugar, como "Sídney", o un nombre y un número de una calle, como "10 King Street". De forma predeterminada, el prediction-item-main-text se muestra de color negro. Si hay texto adicional en prediction-item, este queda fuera de prediction-item-main-text y hereda su diseño de prediction-item. Su color predeterminado es el gris. El texto adicional normalmente es una dirección. |
prediction-item-match |
La parte de la predicción mostrada que coincide con la entrada del usuario. De manera predeterminada, este texto coincidente se resalta en negrita. Ten en cuenta que el texto coincidente puede estar en cualquier parte de prediction-item. No necesariamente forma parte de prediction-item-main-text. |
prediction-item-selected |
Es el elemento que aparece cuando el usuario navega hasta él con el teclado. Nota: Los elementos seleccionados se verán afectados por los estilos de esta parte y también por los estilos de la parte prediction-item. |
prediction-list |
Elemento visual que contiene la lista de predicciones devueltas por el servicio de autocompletado de sitios. Esta lista aparece como una lista desplegable debajo de PlaceAutocompleteElement. |
Propiedades de CSS | |
|---|---|
background-color |
Anula el color de fondo del elemento. |
border |
Anula el borde del elemento. |
border-radius |
Anula el radio del borde del elemento. |
color |
Anula la fuente del elemento. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este elemento. Consulta la documentación de color-scheme para obtener más detalles. La configuración predeterminada es color-scheme: light dark. |
font |
Anula la fuente del elemento. |
font-family |
Anula la fuente del elemento. |
font-size |
Anula la fuente del elemento. |
font-style |
Anula la fuente del elemento. |
font-weight |
Anula la fuente del elemento. |
line-height |
Anula la fuente del elemento. |
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
|---|---|
gmp-error |
function(errorEvent)Argumentos:
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., clave de API incorrecta). Este evento no se propaga. |
gmp-select |
function(placePredictionSelectEvent)Argumentos:
Este evento se activa cuando un usuario selecciona una predicción de lugar. Contiene un objeto PlacePrediction que se puede convertir en un objeto Place. |
Interfaz PlaceAutocompleteElementOptions
Interfaz
google.maps.places.PlaceAutocompleteElementOptions
Son las opciones para construir un PlaceAutocompleteElement. Para obtener la descripción de cada propiedad, consulta la propiedad con el mismo nombre en la clase PlaceAutocompleteElement.
Propiedades | |
|---|---|
includedPrimaryTypes optional |
Tipo:
Array<string> optional |
includedRegionCodes optional |
Tipo:
Array<string> optional |
locationBias optional |
Tipo:
LocationBias optional |
locationRestriction optional |
Tipo:
LocationRestriction optional |
name optional |
Tipo:
string optional |
origin optional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Tipo:
string optional |
requestedRegion optional |
Tipo:
string optional |
unitSystem optional |
Tipo:
UnitSystem optional |
value optional |
Tipo:
string optionalEs el valor del elemento de entrada. |
Clase PlacePredictionSelectEvent
Clase google.maps.places.PlacePredictionSelectEvent
Este evento se crea después de que el usuario selecciona un elemento de predicción con PlaceAutocompleteElement. Accede a la selección con event.placePrediction.
Convierte placePrediction en un Place llamando a PlacePrediction.toPlace.
Esta clase extiende Event.
Para acceder, llama al const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Propiedades | |
|---|---|
placePrediction |
Tipo:
PlacePredictionPara convertirlo en un Place, llama a PlacePrediction.toPlace. |
Clase BasicPlaceAutocompleteElement
Clase google.maps.places.BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement es una subclase de HTMLElement que proporciona un componente de IU para la API de Place Autocomplete.
Elemento personalizado:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>
Esta clase extiende HTMLElement.
Esta clase implementa BasicPlaceAutocompleteElementOptions.
Para acceder, llama al const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
BasicPlaceAutocompleteElement |
BasicPlaceAutocompleteElement(options)Parámetros:
|
Propiedades | |
|---|---|
includedPrimaryTypes |
Tipo:
Array<string> optionalIncluye el tipo de lugar principal (por ejemplo, "restaurant" o "gas_station").
Solo se devuelve un lugar si su tipo principal se incluye en esta lista. Se pueden especificar hasta 5 valores. Si no se especifica ningún tipo, se devuelven todos los tipos de Place. Atributo HTML:
|
includedRegionCodes |
Tipo:
Array<string> optionalSolo incluye resultados en las regiones especificadas, que se indican con hasta 15 códigos de región de dos caracteres del CLDR. Un conjunto vacío no restringirá los resultados. Si se configuran
locationRestriction y includedRegionCodes, los resultados se ubicarán en el área de intersección.Atributo HTML:
|
locationBias |
Tipo:
LocationBias optionalEs un límite o una sugerencia flexible que se usa cuando se buscan lugares. |
locationRestriction |
Tipo:
LocationRestriction optionalSon los límites para restringir los resultados de la búsqueda. |
name |
Tipo:
string optionalEs el nombre que se usará para el elemento de entrada. Consulta https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name para obtener más detalles. Sigue el mismo comportamiento que el atributo name para las entradas. Ten en cuenta que este es el nombre que se usará cuando se envíe un formulario. Consulta https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form para obtener más detalles.
Atributo HTML:
|
origin |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalEs el origen desde el que se calcula la distancia. Si no se especifica, no se calcula la distancia. Si se proporciona la altitud, no se usa en el cálculo.
Atributo HTML:
|
requestedLanguage |
Tipo:
string optionalEs un identificador del idioma en el que se deben devolver los resultados, si es posible. Es posible que los resultados en el idioma seleccionado tengan una clasificación más alta, pero las sugerencias no se restringen a este idioma. Consulta la lista de idiomas compatibles.
Atributo HTML:
|
requestedRegion |
Tipo:
string optionalEs un código de región que se usa para dar formato a los resultados y filtrarlos. No restringe las sugerencias a este país. El código de región acepta un valor de dos caracteres de ccTLD ("dominio de nivel superior"). La mayoría de los códigos ccTLD son idénticos a los códigos ISO 3166-1, con algunas excepciones notables. Por ejemplo, el ccTLD del Reino Unido es "uk" (
.co.uk), mientras que su código ISO 3166-1 es "gb" (técnicamente para la entidad "Reino Unido de Gran Bretaña e Irlanda del Norte").Atributo HTML:
|
unitSystem |
Tipo:
UnitSystem optionalEs el sistema de unidades que se usa para mostrar las distancias. Si no se especifica, el sistema de unidades se determina según requestedRegion.
Atributo HTML:
|
Ranuras | |
|---|---|
prediction-item-icon |
Este espacio acepta exactamente un elemento <template> para renderizarlo como el ícono que se muestra junto al elemento de predicción. |
Piezas | |
|---|---|
input |
Es el elemento de entrada para el elemento de autocompletado. |
prediction-item |
Es un elemento del menú desplegable de predicciones que representa una sola predicción. |
prediction-item-icon |
Icono que aparece a la izquierda de cada elemento de la lista de predicciones. |
prediction-item-main-text |
Es una parte de prediction-item que es el texto principal de la predicción. En el caso de las ubicaciones geográficas, contiene un nombre de lugar, como "Sídney", o un nombre y un número de una calle, como "10 King Street". De forma predeterminada, el prediction-item-main-text se muestra de color negro. Si hay texto adicional en prediction-item, este queda fuera de prediction-item-main-text y hereda su diseño de prediction-item. Su color predeterminado es el gris. El texto adicional normalmente es una dirección. |
prediction-item-match |
La parte de la predicción mostrada que coincide con la entrada del usuario. De manera predeterminada, este texto coincidente se resalta en negrita. Ten en cuenta que el texto coincidente puede estar en cualquier parte de prediction-item. No necesariamente forma parte de prediction-item-main-text. |
prediction-item-selected |
Es el elemento que aparece cuando el usuario navega hasta él con el teclado. Nota: Los elementos seleccionados se verán afectados por los estilos de esta parte y también por los estilos de la parte prediction-item. |
prediction-list |
Elemento visual que contiene la lista de predicciones devueltas por el servicio de autocompletado de sitios. Esta lista aparece como una lista desplegable debajo de PlaceAutocompleteElement. |
Propiedades de CSS | |
|---|---|
background-color |
Anula el color de fondo del elemento. |
border |
Anula el borde del elemento. |
border-radius |
Anula el radio del borde del elemento. |
color |
Anula la fuente del elemento. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este elemento. Consulta la documentación de color-scheme para obtener más detalles. La configuración predeterminada es color-scheme: light dark. |
font |
Anula la fuente del elemento. |
font-family |
Anula la fuente del elemento. |
font-size |
Anula la fuente del elemento. |
font-style |
Anula la fuente del elemento. |
font-weight |
Anula la fuente del elemento. |
line-height |
Anula la fuente del elemento. |
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
|---|---|
gmp-error |
function(errorEvent)Argumentos:
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., clave de API incorrecta). Este evento no se propaga. |
gmp-select |
function(placeSelectEvent)Argumentos:
Este evento se activa cuando un usuario selecciona una predicción de lugar. Contiene un objeto Place. |
Interfaz BasicPlaceAutocompleteElementOptions
Interfaz
google.maps.places.BasicPlaceAutocompleteElementOptions
Opciones para construir un BasicPlaceAutocompleteElement.
Propiedades | |
|---|---|
includedPrimaryTypes optional |
Tipo:
Array<string> optional |
includedRegionCodes optional |
Tipo:
Array<string> optional |
locationBias optional |
Tipo:
LocationBias optional |
locationRestriction optional |
Tipo:
LocationRestriction optional |
name optional |
Tipo:
string optional |
origin optional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Tipo:
string optional |
requestedRegion optional |
Tipo:
string optional |
unitSystem optional |
Tipo:
UnitSystem optional |
Clase PlaceDetailsElement
Clase google.maps.places.PlaceDetailsElement
Muestra los detalles de un lugar en un diseño completo. Agrega un PlaceDetailsPlaceRequestElement o un PlaceDetailsLocationRequestElement para especificar el lugar que se renderizará. Agrega un PlaceContentConfigElement, PlaceStandardContentElement o PlaceAllContentElement para especificar qué contenido renderizar.
Ejemplo:
<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 este elemento, habilita la API del kit de IU de Places para tu proyecto en la consola de Google Cloud.
Elemento personalizado:
<gmp-place-details></gmp-place-details>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceDetailsElementOptions.
Para acceder, llama al const {PlaceDetailsElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceDetailsElement |
PlaceDetailsElement([options])Parámetros:
|
Propiedades | |
|---|---|
place |
Tipo:
Place optionalSolo lectura. Es el objeto Place que contiene el ID, la ubicación y el viewport del lugar renderizado actualmente. |
Propiedades de CSS | |
|---|---|
--gmp-button-border-color |
Es el color del borde del botón "Abrir en Maps". |
--gmp-button-border-radius |
Es el radio del borde del botón "Abrir en Maps". |
--gmp-button-border-width |
Es el ancho del borde del botón "Abrir en Maps". |
--gmp-collage-border-radius-outer |
Es el radio del borde de las esquinas exteriores del collage de contenido multimedia. |
--gmp-dialog-border-radius |
Es el radio del borde del diálogo de divulgación de Google Maps. |
--gmp-mat-color-disabled-surface |
Color de superficie destinado a transmitir estados inhabilitados o de no presencia. Se usa para las estrellas de opiniones vacías. |
--gmp-mat-color-info |
Es el color de los elementos de la IU con un sentimiento informativo. Se usa para el ícono de silla de ruedas. |
--gmp-mat-color-negative |
Es el color de los elementos de la IU con un sentimiento negativo. Se usa para el texto "Cerrado" en el estado de apertura actual. |
--gmp-mat-color-neutral-container |
Es el color del contenedor para los elementos de la IU con relleno neutro. Se usa para los marcadores de posición de imágenes y la insignia de la fecha de publicación de la opinión. |
--gmp-mat-color-on-neutral-container |
Color del texto y de los íconos sobre el color neutro del contenedor. Se usa para la insignia de la fecha de publicación de la opinión y la insignia de disponibilidad del cargador de VE cuando no está disponible. |
--gmp-mat-color-on-positive-container |
Color de los textos y los íconos en contraste con el color del contenedor positivo. Se usa para la insignia de disponibilidad del cargador de VE cuando está disponible. |
--gmp-mat-color-on-secondary-container |
Es el color del texto y de los íconos sobre el color del contenedor secundario. Se usa para el texto y los íconos del botón "Abrir en Maps". |
--gmp-mat-color-on-surface |
Color para el texto y los íconos sobre cualquier color de superficie. Se usa para el texto normal. |
--gmp-mat-color-on-surface-variant |
Es el color de menor énfasis para el texto y los íconos sobre cualquier color de superficie. Se usa para texto con menos énfasis. |
--gmp-mat-color-outline-decorative |
Es el color del contorno de los elementos no interactivos. Se usa para el borde del elemento. |
--gmp-mat-color-positive |
Es el color de los elementos de la IU con un sentimiento positivo. Se usa para el texto "Abierto" en el estado de abierto ahora. |
--gmp-mat-color-positive-container |
Es el color del contenedor para los elementos de la IU que transmiten un sentimiento positivo. Se usa para la insignia de disponibilidad del cargador de VE cuando está disponible. |
--gmp-mat-color-primary |
Es el color del texto y los íconos interactivos en comparación con el color de la superficie. Se usa para el recuento de opiniones, los vínculos en el diálogo de divulgaciones de Google Maps, el vínculo al sitio web, los íconos en la pestaña Resumen y (desplazamiento/enfoque/color del texto) en los títulos de la barra de pestañas. |
--gmp-mat-color-secondary-container |
Es un color de relleno menos destacado contra la superficie, para componentes recesivos, como los botones tonales. Se usa para el fondo del botón "Abrir en Maps". |
--gmp-mat-color-surface |
Color para los fondos. Se usa para los fondos del elemento y el diálogo de divulgación de Google Maps. |
--gmp-mat-font-body-medium |
Se usa para la dirección, la calificación, el tipo, el precio, el estado de apertura, el horario de atención, las opiniones, el número de teléfono, el sitio web, el Plus Code, las características principales y el texto del cuerpo del diálogo de divulgación de Google Maps. |
--gmp-mat-font-body-small |
Se usa para el texto del cuerpo de la lista de funciones en la pestaña "Acerca de". |
--gmp-mat-font-display-small |
Se usa para el nombre del lugar y el texto de cada encabezado de atributo en la pestaña "Acerca de". |
--gmp-mat-font-family |
Es la familia de fuentes base que se usa para todo el texto. |
--gmp-mat-font-headline-medium |
Se usa para el texto del encabezado en el diálogo de divulgación de Google Maps. |
--gmp-mat-font-label-large |
Se usa para los títulos de las pestañas, el botón "Abrir en Maps", el texto de atribución del usuario que envía la opinión en la galería de fotos, el texto de atribución del usuario que envía la opinión en la sección de opiniones y los vínculos en el diálogo de divulgación de Google Maps. |
--gmp-mat-font-label-medium |
Se usa para la insignia de recuento de fotos y la insignia de fecha de publicación de la opinión. |
--gmp-mat-font-title-small |
Se usa para el título de cada sección en la pestaña "Acerca de". |
--gmp-mat-spacing-extra-large |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-extra-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-large |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-medium |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-two-extra-large |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-star-rating-color |
Es el color de las estrellas completas en la calificación. |
background-color |
Anula el color de fondo del elemento. |
border |
Anula el borde del elemento. |
border-radius |
Anula el radio del borde del elemento. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este elemento. Consulta la documentación de color-scheme para obtener más detalles. La configuración predeterminada es color-scheme: light dark. |
font-size |
Ajusta la escala de todo el texto y los íconos del elemento, que se definen internamente en ems. La configuración predeterminada es 16px. |
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., clave de API incorrecta). Este evento no se propaga. |
gmp-load |
function(event)Argumentos:
Este evento se activa cuando el elemento carga y renderiza su contenido. Este evento no se propaga. |
Interfaz PlaceDetailsElementOptions
Interfaz
google.maps.places.PlaceDetailsElementOptions
Opciones para PlaceDetailsElement.
Clase PlaceDetailsCompactElement
Clase google.maps.places.PlaceDetailsCompactElement
Muestra los detalles de un lugar en un diseño compacto. Agrega un PlaceDetailsPlaceRequestElement o PlaceDetailsLocationRequestElement para especificar el lugar que se renderizará. Agrega un PlaceContentConfigElement, PlaceStandardContentElement o PlaceAllContentElement para especificar qué contenido renderizar.
Ejemplo:
<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 este elemento, habilita la API del kit de IU de Places para tu proyecto en la consola de Google Cloud.
Elemento personalizado:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceDetailsCompactElementOptions.
Para acceder, llama al const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceDetailsCompactElement |
PlaceDetailsCompactElement([options])Parámetros:
|
Propiedades | |
|---|---|
orientation |
Tipo:
PlaceDetailsOrientation optionalLa configuración predeterminada es
PlaceDetailsOrientation.VERTICAL.Es la variante de orientación (vertical u horizontal) del elemento.
Atributo HTML:
|
place |
Tipo:
Place optionalSolo lectura. Es el objeto Place que contiene el ID, la ubicación y el viewport del lugar renderizado actualmente. |
truncationPreferred |
Tipo:
booleanLa configuración predeterminada es
false.Si es verdadero, trunca el nombre y la dirección del lugar para que quepan en una línea en lugar de ajustarse.
Atributo HTML:
|
Propiedades de CSS | |
|---|---|
--gmp-button-border-color |
Es el color del borde del botón "Abrir en Maps". |
--gmp-button-border-radius |
Es el radio del borde del botón "Abrir en Maps". |
--gmp-button-border-width |
Es el ancho del borde del botón "Abrir en Maps". |
--gmp-dialog-border-radius |
Es el radio del borde del diálogo de divulgación de Google Maps. |
--gmp-mat-color-info |
Es el color de los elementos de la IU con un sentimiento informativo. Se usa para el ícono de silla de ruedas. |
--gmp-mat-color-negative |
Es el color de los elementos de la IU con un sentimiento negativo. Se usa para el texto "Cerrado" en el estado de apertura actual. |
--gmp-mat-color-neutral-container |
Es el color del contenedor para los elementos de la IU con relleno neutro. Se usa para los marcadores de posición de imágenes. |
--gmp-mat-color-on-secondary-container |
Es el color del texto y de los íconos sobre el color del contenedor secundario. Se usa para el texto y los íconos del botón "Abrir en Maps". |
--gmp-mat-color-on-surface |
Color para el texto y los íconos sobre cualquier color de superficie. Se usa para el texto normal. |
--gmp-mat-color-on-surface-variant |
Es el color de menor énfasis para el texto y los íconos sobre cualquier color de superficie. Se usa para texto con menos énfasis. |
--gmp-mat-color-outline-decorative |
Es el color del contorno de los elementos no interactivos. Se usa para el borde del elemento. |
--gmp-mat-color-positive |
Es el color de los elementos de la IU con un sentimiento positivo. Se usa para el texto "Abierto" en el estado de abierto ahora. |
--gmp-mat-color-primary |
Es el color del texto y los íconos interactivos en comparación con el color de la superficie. Se usa para el recuento de opiniones, así como para los vínculos en el diálogo de divulgación de Google Maps. |
--gmp-mat-color-secondary-container |
Es un color de relleno menos destacado contra la superficie, para componentes recesivos, como los botones tonales. Se usa para el fondo del botón "Abrir en Maps". |
--gmp-mat-color-surface |
Color para los fondos. Se usa para los fondos del elemento y el diálogo de divulgación de Google Maps. |
--gmp-mat-font-body-medium |
Se usa para el texto del cuerpo en el diálogo de divulgaciones de Google Maps. |
--gmp-mat-font-body-small |
Se usa para la dirección, la calificación, el tipo, el precio y el estado de apertura del lugar. |
--gmp-mat-font-family |
Es la familia de fuentes base que se usa para todo el texto. |
--gmp-mat-font-headline-medium |
Se usa para el texto del encabezado en el diálogo de divulgación de Google Maps. |
--gmp-mat-font-label-large |
Se usa para el botón "Abrir en Maps", así como para los vínculos en el diálogo de divulgación de Google Maps y el texto de atribución del revisor en la galería de fotos. |
--gmp-mat-font-label-medium |
Se usa para la insignia de recuento de fotos. |
--gmp-mat-font-title-small |
Se usa para el nombre del lugar. |
--gmp-mat-spacing-extra-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-large |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-medium |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-star-rating-color |
Es el color de las estrellas completas en la calificación. |
--gmp-thumbnail-border-radius |
Es el radio del borde de la imagen en miniatura del lugar. |
background-color |
Anula el color de fondo del elemento. |
border |
Anula el borde del elemento. |
border-radius |
Anula el radio del borde del elemento. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este elemento. Consulta la documentación de color-scheme para obtener más detalles. La configuración predeterminada es color-scheme: light dark. |
font-size |
Ajusta la escala de todo el texto y los íconos del elemento, que se definen internamente en ems. La configuración predeterminada es 16px. |
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., clave de API incorrecta). Este evento no se propaga. |
gmp-load |
function(event)Argumentos:
Este evento se activa cuando el elemento carga y renderiza su contenido. Este evento no se propaga. |
Interfaz PlaceDetailsCompactElementOptions
Interfaz
google.maps.places.PlaceDetailsCompactElementOptions
Opciones para PlaceDetailsCompactElement.
Propiedades | |
|---|---|
orientation optional |
Tipo:
PlaceDetailsOrientation optionalConsulta los PlaceDetailsCompactElement.orientation. |
truncationPreferred optional |
Tipo:
boolean optionalConsulta los PlaceDetailsCompactElement.truncationPreferred. |
Constantes de PlaceDetailsOrientation
Constantes de
google.maps.places.PlaceDetailsOrientation
Variantes de orientación para PlaceDetailsCompactElement.
Para acceder, llama al const {PlaceDetailsOrientation} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
|---|---|
HORIZONTAL |
Orientación horizontal |
VERTICAL |
Orientación vertical. |
Clase PlaceDetailsPlaceRequestElement
Clase google.maps.places.PlaceDetailsPlaceRequestElement
Configura un PlaceDetailsCompactElement o PlaceDetailsElement para cargar datos según un objeto Place, un ID o un nombre de recurso. Agrega este elemento como elemento secundario de un PlaceDetailsCompactElement o PlaceDetailsElement para cargar datos del lugar especificado. Por ejemplo:
<gmp-place-details>
<gmp-place-details-place-request
place="PLACE_ID"
></gmp-place-details-place-request>
</gmp-place-details> Elemento personalizado:
<gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceDetailsPlaceRequestElementOptions.
Para acceder, llama al const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceDetailsPlaceRequestElement |
PlaceDetailsPlaceRequestElement([options])Parámetros:
|
Propiedades | |
|---|---|
place |
Tipo:
Place optionalLa configuración predeterminada es
null.Es el objeto, el ID o el nombre del recurso del lugar para el que se renderizarán los detalles en el elemento Place Details Compact. Esta propiedad se refleja en el atributo como un nombre de recurso.
Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceDetailsPlaceRequestElementOptions
Interfaz
google.maps.places.PlaceDetailsPlaceRequestElementOptions
Opciones para PlaceDetailsPlaceRequestElement.
Propiedades | |
|---|---|
place optional |
Tipo:
Place|string optional |
Clase PlaceDetailsLocationRequestElement
Clase google.maps.places.PlaceDetailsLocationRequestElement
Configura un PlaceDetailsCompactElement o PlaceDetailsElement para cargar datos según una ubicación. Agrega este elemento como un elemento secundario de un PlaceDetailsCompactElement o PlaceDetailsElement para cargar datos de la ubicación especificada. Por ejemplo:
<gmp-place-details>
<gmp-place-details-location-request
location="37.6207665,-122.4284806"
></gmp-place-details-location-request>
</gmp-place-details> Elemento personalizado:
<gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceDetailsLocationRequestElementOptions.
Para acceder, llama al const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceDetailsLocationRequestElement |
PlaceDetailsLocationRequestElement([options])Parámetros:
|
Propiedades | |
|---|---|
location |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalLa configuración predeterminada es
null.Es la ubicación para la que se renderizarán los detalles en el elemento Place Details. Se normaliza a un
LatLngAltitude.Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceDetailsLocationRequestElementOptions
Interfaz
google.maps.places.PlaceDetailsLocationRequestElementOptions
Opciones para PlaceDetailsLocationRequestElement.
Propiedades | |
|---|---|
location optional |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalEs la ubicación para la que se renderizará el lugar. |
Clase PlaceSearchElement
Clase google.maps.places.PlaceSearchElement
Muestra los resultados de una búsqueda de lugares en una lista. Agrega un PlaceTextSearchRequestElement o PlaceNearbySearchRequestElement para especificar la solicitud para la que se renderizarán los resultados. Agrega un PlaceContentConfigElement, PlaceStandardContentElement o PlaceAllContentElement para especificar qué contenido renderizar.
Ejemplo:
<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 el elemento Place Search, habilita la API del kit de IU de Places para tu proyecto en la consola de Google Cloud.
Elemento personalizado:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceSearchElementOptions.
Para acceder, llama al const {PlaceSearchElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceSearchElement |
PlaceSearchElement([options])Parámetros:
|
Propiedades | |
|---|---|
attributionPosition |
Tipo:
PlaceSearchAttributionPosition optionalLa configuración predeterminada es
PlaceSearchAttributionPosition.TOP.La posición del logotipo de atribución y el botón de divulgación legal.
Atributo HTML:
|
orientation |
Tipo:
PlaceSearchOrientation optionalLa configuración predeterminada es
PlaceSearchOrientation.VERTICAL.Es la variante de orientación (vertical u horizontal) del elemento.
Atributo HTML:
|
places |
Solo lectura. Es un array de objetos Place que contiene los IDs, las ubicaciones y los viewports de los lugares renderizados actualmente. |
selectable |
Tipo:
boolean optionalLa configuración predeterminada es
false.Indica si se pueden seleccionar los elementos de la lista. Si es verdadero, los elementos de la lista serán botones que enviarán el evento
gmp-select cuando se haga clic en ellos. También se admite la navegación y la selección accesibles con el teclado.Atributo HTML:
|
truncationPreferred |
Tipo:
boolean optionalLa configuración predeterminada es
false.Si es verdadero, trunca ciertas líneas de contenido para que quepan en una línea en lugar de ajustarse.
Atributo HTML:
|
Propiedades de CSS | |
|---|---|
--gmp-button-border-color |
Es el color del borde del botón "Abrir en Maps". |
--gmp-button-border-radius |
Es el radio del borde del botón "Abrir en Maps". |
--gmp-button-border-width |
Es el ancho del borde del botón "Abrir en Maps". |
--gmp-card-border-radius |
Es el radio del borde de las tarjetas de lugares. |
--gmp-dialog-border-radius |
Es el radio del borde del diálogo de divulgación de Google Maps. |
--gmp-mat-color-info |
Es el color de los elementos de la IU con un sentimiento informativo. Se usa para el ícono de entrada accesible. |
--gmp-mat-color-negative |
Es el color de los elementos de la IU con un sentimiento negativo. Se usa para la etiqueta "Cerrado" en el horario de atención de un lugar. |
--gmp-mat-color-neutral-container |
Es el color del contenedor para los elementos de la IU con relleno neutro. Se usa para las insignias de fecha de las opiniones y las formas de marcador de posición de carga. |
--gmp-mat-color-on-neutral-container |
Es el color del texto y los íconos en un contenedor neutro. Se usa para el texto de la fecha de la opinión y el texto del error de carga. |
--gmp-mat-color-on-secondary-container |
Es el color del texto y de los íconos sobre un color de contenedor secundario. Se usa para el texto y los íconos de los botones. |
--gmp-mat-color-on-surface |
Es el color del texto y los íconos sobre un color de superficie. Se usa para encabezados y contenido de diálogos. |
--gmp-mat-color-on-surface-variant |
Es el color de menor énfasis para el texto y los íconos sobre un color de superficie. Se usa para obtener información sobre el lugar. |
--gmp-mat-color-outline-decorative |
Es el color del contorno de los elementos no interactivos. Se usa para el borde del contenedor. |
--gmp-mat-color-positive |
Es el color de los elementos de la IU con un sentimiento positivo. Se usa para la etiqueta "Abierto" en el horario de atención de un lugar. |
--gmp-mat-color-primary |
Es el color del texto y los íconos interactivos en comparación con el color de la superficie. Se usa para vínculos, el indicador de carga y los íconos de resumen. |
--gmp-mat-color-secondary-container |
Color de relleno menos prominente contra una superficie. Se usa para los fondos de los botones. |
--gmp-mat-color-surface |
Color para los fondos. Se usa para los fondos de contenedores y diálogos. |
--gmp-mat-font-body-small |
Se usa para obtener información sobre el lugar. |
--gmp-mat-font-family |
Es la familia de fuentes base para todo el texto. |
--gmp-mat-font-headline-medium |
Se usa para los encabezados de los diálogos. |
--gmp-mat-font-label-large |
Se usa para el contenido de los botones. |
--gmp-mat-font-title-medium |
Se usa para el nombre del lugar. |
--gmp-mat-spacing-extra-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-large |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-medium |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-mat-spacing-small |
Se usa para el espaciado dentro del elemento, como el margen y el padding alrededor del texto. |
--gmp-star-rating-color |
Es el color de las estrellas completas en una calificación por estrellas. |
--gmp-thumbnail-border-radius |
Es el radio del borde de la imagen en miniatura del lugar. |
background-color |
Anula el color de fondo del elemento. |
border |
Anula el borde del elemento. |
border-radius |
Anula el radio del borde del elemento. |
color-scheme |
Indica en qué esquema de colores se puede renderizar este elemento. Consulta la documentación de color-scheme para obtener más detalles. La configuración predeterminada es color-scheme: light dark. |
font-size |
Ajusta la escala de todo el texto y los íconos del elemento. La configuración predeterminada es 16px. |
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Eventos | |
|---|---|
gmp-error |
function(event)Argumentos:
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., clave de API incorrecta). Este evento no se propaga. |
gmp-load |
function(event)Argumentos:
Este evento se activa cuando el elemento carga y renderiza su contenido. Este evento no se propaga. |
gmp-select |
function(event)Argumentos:
Este evento se activa cuando se selecciona un lugar de la lista. Contiene un objeto Place con el ID, la ubicación y el viewport del lugar seleccionado. |
Interfaz PlaceSearchElementOptions
Interfaz
google.maps.places.PlaceSearchElementOptions
Opciones para PlaceSearchElement.
Propiedades | |
|---|---|
attributionPosition optional |
Tipo:
PlaceSearchAttributionPosition optionalConsulta los PlaceSearchElement.attributionPosition. |
orientation optional |
Tipo:
PlaceSearchOrientation optionalConsulta los PlaceSearchElement.orientation. |
selectable optional |
Tipo:
boolean optional |
truncationPreferred optional |
Tipo:
boolean optionalConsulta los PlaceSearchElement.truncationPreferred. |
Constantes de PlaceSearchAttributionPosition
Constantes de
google.maps.places.PlaceSearchAttributionPosition
Posiciones de atribución para PlaceSearchElement.
Para acceder, llama al const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
|---|---|
BOTTOM |
Atribución en la parte inferior del PlaceSearchElement |
TOP |
Atribución en la parte superior del PlaceSearchElement |
Constantes de PlaceSearchOrientation
Constantes de
google.maps.places.PlaceSearchOrientation
Variantes de orientación para PlaceSearchElement.
Para acceder, llama al const {PlaceSearchOrientation} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
|---|---|
HORIZONTAL |
Orientación horizontal |
VERTICAL |
Orientación vertical. |
Clase PlaceSelectEvent
Clase google.maps.places.PlaceSelectEvent
Este evento se activa cuando se selecciona un lugar de una lista de lugares. Accede a la selección con event.place.
Esta clase extiende Event.
Para acceder, llama al const {PlaceSelectEvent} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Propiedades | |
|---|---|
place |
Tipo:
PlaceEs el lugar seleccionado. |
Clase PlaceNearbySearchRequestElement
Clase google.maps.places.PlaceNearbySearchRequestElement
Configura un PlaceSearchElement para cargar resultados según una solicitud de Nearby Search. La propiedad locationRestriction es obligatoria para que se cargue el elemento de búsqueda. Se ignorarán todas las demás propiedades configuradas si no se establece locationRestriction. Agrega este elemento como un elemento secundario de un PlaceSearchElement para cargar los resultados. Por ejemplo:
<gmp-place-search>
<gmp-place-nearby-search-request
location-restriction="RADIUS@LAT,LNG"
></gmp-place-nearby-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Elemento personalizado:
<gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..." excluded-types="excluded-type1 excluded-type2..." included-primary-types="included-primary-type1 included-primary-type2..." included-types="included-type1 included-type2..." location-restriction="radius@lat,lng" max-result-count="number" rank-preference="preference"></gmp-place-nearby-search-request>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceNearbySearchRequestElementOptions.
Para acceder, llama al const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceNearbySearchRequestElement |
PlaceNearbySearchRequestElement([options])Parámetros:
|
Propiedades | |
|---|---|
excludedPrimaryTypes |
Tipo:
Array<string> optionalLa configuración predeterminada es
null.Son los tipos de lugares principales excluidos.
Atributo HTML:
|
excludedTypes |
Tipo:
Array<string> optionalLa configuración predeterminada es
null.Son los tipos de lugares excluidos.
Atributo HTML:
|
includedPrimaryTypes |
Tipo:
Array<string> optionalLa configuración predeterminada es
null.Se incluyó el tipo de lugar principal.
Atributo HTML:
|
includedTypes |
Tipo:
Array<string> optionalLa configuración predeterminada es
null.Es el tipo de lugar incluido.
Atributo HTML:
|
locationRestriction |
Tipo:
Circle|CircleLiteral optionalLa configuración predeterminada es
null.Es la región en la que se realizará la búsqueda. Se normaliza a un
Circle.Atributo HTML:
|
maxResultCount |
Tipo:
number optionalLa configuración predeterminada es
null.Cantidad máxima de resultados que se mostrarán.
Atributo HTML:
|
rankPreference |
Tipo:
SearchNearbyRankPreference optionalLa configuración predeterminada es
null.Cómo se clasificarán los resultados en la respuesta.
Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceNearbySearchRequestElementOptions
Interfaz
google.maps.places.PlaceNearbySearchRequestElementOptions
Opciones para PlaceNearbySearchRequestElement.
Propiedades | |
|---|---|
excludedPrimaryTypes optional |
Tipo:
Array<string> optionalSon los tipos de lugares principales excluidos. Consulta PlaceNearbySearchRequestElement.excludedPrimaryTypes y SearchNearbyRequest.excludedPrimaryTypes para obtener más información. |
excludedTypes optional |
Tipo:
Array<string> optionalSon los tipos de lugares excluidos. Consulta PlaceNearbySearchRequestElement.excludedTypes y SearchNearbyRequest.excludedTypes para obtener más información. |
includedPrimaryTypes optional |
Tipo:
Array<string> optionalTipos de lugares principales incluidos. Consulta PlaceNearbySearchRequestElement.includedPrimaryTypes y SearchNearbyRequest.includedPrimaryTypes para obtener más información. |
includedTypes optional |
Tipo:
Array<string> optionalTipos de lugares incluidos Consulta PlaceNearbySearchRequestElement.includedTypes y SearchNearbyRequest.includedTypes para obtener más información. |
locationRestriction optional |
Tipo:
Circle|CircleLiteral optionalEs la región en la que se realizará la búsqueda. Consulta PlaceNearbySearchRequestElement.locationRestriction y SearchNearbyRequest.locationRestriction para obtener más información. |
maxResultCount optional |
Tipo:
number optionalCantidad máxima de resultados que se mostrarán. Consulta PlaceNearbySearchRequestElement.maxResultCount y SearchNearbyRequest.maxResultCount para obtener más información. |
rankPreference optional |
Tipo:
SearchNearbyRankPreference optionalCómo se clasificarán los resultados en la respuesta. Consulta PlaceNearbySearchRequestElement.rankPreference y SearchNearbyRankPreference para obtener más información. |
Clase PlaceTextSearchRequestElement
Clase google.maps.places.PlaceTextSearchRequestElement
Configura un PlaceSearchElement para cargar resultados según una solicitud de búsqueda de texto. La propiedad textQuery es obligatoria para que se cargue el elemento de búsqueda. Se ignorarán todas las demás propiedades configuradas si no se establece textQuery. Agrega este elemento como un elemento secundario de un PlaceSearchElement para cargar los resultados. Por ejemplo:
<gmp-place-search>
<gmp-place-text-search-request
text-query="QUERY"
></gmp-place-text-search-request>
<gmp-place-content-config>
<gmp-place-media lightbox-preferred></gmp-place-media>
</gmp-place-content-config>
</gmp-place-search> Elemento personalizado:
<gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..." ev-minimum-charging-rate-kw="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceTextSearchRequestElementOptions.
Para acceder, llama al const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceTextSearchRequestElement |
PlaceTextSearchRequestElement([options])Parámetros:
|
Propiedades | |
|---|---|
evConnectorTypes |
Tipo:
Array<EVConnectorType> optionalLa configuración predeterminada es
null.Es la lista de tipos de conectores de VE preferidos.
Atributo HTML:
|
evMinimumChargingRateKw |
Tipo:
number optionalLa configuración predeterminada es
null.Es la tasa de carga mínima requerida en kilovatios.
Atributo HTML:
|
includedType |
Tipo:
string optionalLa configuración predeterminada es
null.Es el tipo de lugar solicitado.
Atributo HTML:
|
isOpenNow |
Tipo:
boolean optionalLa configuración predeterminada es
null.Se usa para restringir la búsqueda a los lugares que están abiertos en ese momento.
Atributo HTML:
|
locationBias |
Tipo:
LocationBias optionalLa configuración predeterminada es
null.Es la personalización de ubicación para la búsqueda. Se normaliza a un
LatLngAltitude | LatLngBounds | Circle | string.Atributo HTML:
|
locationRestriction |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalLa configuración predeterminada es
null.Es la restricción de ubicación para la búsqueda. Se normaliza a un
LatLngBounds.Atributo HTML:
|
maxResultCount |
Tipo:
number optionalLa configuración predeterminada es
null.Cantidad máxima de resultados que se mostrarán.
Atributo HTML:
|
minRating |
Tipo:
number optionalLa configuración predeterminada es
null.Filtra los resultados cuya calificación promedio de los usuarios sea estrictamente inferior a este límite.
Atributo HTML:
|
priceLevels |
Tipo:
Array<PriceLevel> optionalLa configuración predeterminada es
null.Se usa para restringir la búsqueda a lugares que están marcados con ciertos niveles de precios.
Atributo HTML:
|
rankPreference |
Tipo:
SearchByTextRankPreference optionalLa configuración predeterminada es
null.Cómo se clasificarán los resultados en la respuesta.
Atributo HTML:
|
textQuery |
Tipo:
string optionalLa configuración predeterminada es
null.Es la consulta de texto para la búsqueda textual.
Atributo HTML:
|
useStrictTypeFiltering |
Tipo:
boolean optionalLa configuración predeterminada es
null.Se usa para establecer un filtrado de tipo estricto para "includedType".
Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceTextSearchRequestElementOptions
Interfaz
google.maps.places.PlaceTextSearchRequestElementOptions
Opciones para PlaceTextSearchRequestElement.
Propiedades | |
|---|---|
evConnectorTypes optional |
Tipo:
Array<EVConnectorType> optionalEs la lista de tipos de conectores de VE preferidos. Consulta SearchByTextRequest.evSearchOptions y PlaceTextSearchRequestElement.evConnectorTypes para obtener más información. |
evMinimumChargingRateKw optional |
Tipo:
number optionalEs la tasa de carga mínima requerida en kilovatios. Consulta SearchByTextRequest.evSearchOptions y PlaceTextSearchRequestElement.evMinimumChargingRateKw para obtener más información. |
includedType optional |
Tipo:
string optionalEs el tipo de lugar solicitado. Consulta SearchByTextRequest.includedType y PlaceTextSearchRequestElement.includedType para obtener más información. |
isOpenNow optional |
Tipo:
boolean optionalSe usa para restringir la búsqueda a los lugares que están abiertos en ese momento. Consulta SearchByTextRequest.isOpenNow y PlaceTextSearchRequestElement.isOpenNow para obtener más información. |
locationBias optional |
Tipo:
LocationBias optionalEs la personalización de ubicación para la búsqueda. Consulta SearchByTextRequest.locationBias y PlaceTextSearchRequestElement.locationBias para obtener más información. |
locationRestriction optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalEs la restricción de ubicación para la búsqueda. Consulta SearchByTextRequest.locationRestriction y PlaceTextSearchRequestElement.locationRestriction para obtener más información. |
maxResultCount optional |
Tipo:
number optionalCantidad máxima de resultados que se mostrarán. Consulta SearchByTextRequest.maxResultCount y PlaceTextSearchRequestElement.maxResultCount para obtener más información. |
minRating optional |
Tipo:
number optionalFiltra los resultados cuya calificación promedio de los usuarios sea estrictamente inferior a este límite. Consulta SearchByTextRequest.minRating y PlaceTextSearchRequestElement.minRating para obtener más información. |
priceLevels optional |
Tipo:
Array<PriceLevel> optionalSe usa para restringir la búsqueda a lugares que están marcados con ciertos niveles de precios. Consulta SearchByTextRequest.priceLevels y PlaceTextSearchRequestElement.priceLevels para obtener más información. |
rankPreference optional |
Tipo:
SearchByTextRankPreference optionalCómo se clasificarán los resultados en la respuesta. Consulta SearchByTextRequest.rankPreference y PlaceTextSearchRequestElement.rankPreference para obtener más información. |
textQuery optional |
Tipo:
string optionalEs la consulta de texto para la búsqueda textual. Consulta SearchByTextRequest.textQuery y PlaceTextSearchRequestElement.textQuery para obtener más información. |
useStrictTypeFiltering optional |
Tipo:
boolean optionalSe usa para establecer un filtrado de tipo estricto para SearchByTextRequest.includedType. Consulta SearchByTextRequest.useStrictTypeFiltering y PlaceTextSearchRequestElement.useStrictTypeFiltering para obtener más información. |
Clase Autocomplete
Clase google.maps.places.Autocomplete
Es un widget que proporciona predicciones de lugares según la entrada de texto de un usuario. Se adjunta a un elemento de entrada de tipo text y escucha la entrada de texto en ese campo. La lista de predicciones se presenta como una lista desplegable y se actualiza a medida que se ingresa texto.
Esta clase extiende MVCObject.
Para acceder, llama al const {Autocomplete} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
Autocomplete |
Autocomplete(inputField[, opts])Parámetros:
Crea una instancia nueva de Autocomplete que se adjunta al campo de texto de entrada especificado con las opciones dadas. |
Métodos | |
|---|---|
getBounds |
getBounds()Parámetros: Ninguno
Valor de retorno:
LatLngBounds|undefined Los límites de personalización.Devuelve los límites hacia los que se sesgan las predicciones. |
getFields |
getFields()Parámetros: Ninguno
Valor de retorno:
Array<string>|undefinedDevuelve los campos que se incluirán para el lugar en la respuesta de detalles cuando estos se recuperen correctamente. Para obtener una lista de campos, consulta PlaceResult. |
getPlace |
getPlace()Parámetros: Ninguno
Valor de retorno:
PlaceResult El lugar que seleccionó el usuario.Devuelve los detalles del lugar que seleccionó el usuario si se recuperaron correctamente. De lo contrario, devuelve un objeto Place de stub, con la propiedad name establecida en el valor actual del campo de entrada. |
setBounds |
setBounds(bounds)Parámetros:
Valor de retorno: Ninguno
Establece el área preferida dentro de la cual se deben mostrar los resultados de Place. Los resultados tienen un sesgo hacia, aunque no se restringen a, esta área. |
setComponentRestrictions |
setComponentRestrictions(restrictions)Parámetros:
Valor de retorno: Ninguno
Establece las restricciones de componentes. Las restricciones de componentes se usan para limitar las predicciones solo a aquellas que se encuentran dentro del componente superior. Por ejemplo, el país. |
setFields |
setFields(fields)Parámetros:
Valor de retorno: Ninguno
Establece los campos que se incluirán para el lugar en la respuesta de detalles cuando estos se recuperen correctamente. Para obtener una lista de campos, consulta PlaceResult. |
setOptions |
setOptions(options)Parámetros:
Valor de retorno: Ninguno
|
setTypes |
setTypes(types)Parámetros:
Valor de retorno: Ninguno
Establece los tipos de predicciones que se devolverán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifica ningún tipo, se devolverán todos los tipos. |
Heredados:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Eventos | |
|---|---|
place_changed |
function()Argumentos: Ninguno
Este evento se activa cuando un PlaceResult está disponible para un lugar que el usuario seleccionó. Si el usuario ingresa el nombre de un lugar que no sugirió el control y presiona la tecla Intro, o si falla una solicitud de Place Details, PlaceResult contiene la entrada del usuario en la propiedad name, sin otras propiedades definidas. |
Interfaz AutocompleteOptions
Interfaz
google.maps.places.AutocompleteOptions
Son las opciones que se pueden establecer en un objeto Autocomplete.
Propiedades | |
|---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalEs el área en la que se buscarán lugares. |
componentRestrictions optional |
Tipo:
ComponentRestrictions optionalLas restricciones de los componentes. Las restricciones de componentes se usan para limitar las predicciones solo a aquellas que se encuentran dentro del componente superior. Por ejemplo, el país. |
fields optional |
Tipo:
Array<string> optionalSon los campos que se incluirán para el lugar en la respuesta de detalles cuando estos se recuperen correctamente, por los que se facturará. Si se pasa ['ALL'], se mostrarán y se facturarán todos los campos disponibles (esto no se recomienda en las implementaciones de producción). Para obtener una lista de campos, consulta PlaceResult. Los campos anidados se pueden especificar con rutas de acceso de puntos (por ejemplo, "geometry.location"). El valor predeterminado es ['ALL']. |
|
Tipo:
boolean optionalIndica si se deben recuperar solo los IDs de lugar. El PlaceResult que se pone a disposición cuando se activa el evento place_changed solo tendrá los campos ID de lugar, types y name, con los valores de ID de lugar, types y description que devuelve el servicio de Autocomplete. Está inhabilitado de forma predeterminada. |
strictBounds optional |
Tipo:
boolean optionalEs un valor booleano que indica que el widget de Autocomplete solo debe mostrar los lugares que se encuentran dentro de los límites del widget de Autocomplete en el momento en que se envía la consulta. Si configuras strictBounds como false (que es el valor predeterminado), la personalización de resultados se inclinará, aunque no de manera exclusiva, hacia los lugares contenidos dentro de los límites. |
types optional |
Tipo:
Array<string> optionalSon los tipos de predicciones que se devolverán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifica ningún tipo, se devolverán todos los tipos. |
Clase SearchBox
Clase google.maps.places.SearchBox
Es un widget que proporciona predicciones de consultas basadas en la entrada de texto de un usuario. Se adjunta a un elemento de entrada de tipo text y escucha la entrada de texto en ese campo. La lista de predicciones se presenta como una lista desplegable y se actualiza a medida que se ingresa texto.
Esta clase extiende MVCObject.
Para acceder, llama al const {SearchBox} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
SearchBox |
SearchBox(inputField[, opts])Parámetros:
Crea una instancia nueva de SearchBox que se adjunta al campo de texto de entrada especificado con las opciones dadas. |
Métodos | |
|---|---|
getBounds |
getBounds()Parámetros: Ninguno
Valor de retorno:
LatLngBounds|undefinedMuestra los límites hacia los que se sesgan las predicciones de búsqueda. |
getPlaces |
getPlaces()Parámetros: Ninguno
Valor de retorno:
Array<PlaceResult>|undefinedMuestra la búsqueda que seleccionó el usuario para usarla con el evento places_changed. |
setBounds |
setBounds(bounds)Parámetros:
Valor de retorno: Ninguno
Establece la región que se usará para sesgar las predicciones de búsqueda. Los resultados solo se sesgarán hacia esta área y no se restringirán por completo a ella. |
Heredados:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Eventos | |
|---|---|
places_changed |
function()Argumentos: Ninguno
Este evento se activa cuando el usuario selecciona una búsqueda. Se debe usar getPlaces para obtener lugares nuevos. |
Interfaz SearchBoxOptions
Interfaz
google.maps.places.SearchBoxOptions
Son las opciones que se pueden establecer en un objeto SearchBox.
Propiedades | |
|---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optionalEs el área hacia la que se deben sesgar las predicciones de la búsqueda. Las predicciones tienen sesgo hacia, aunque no se restringen a, las consultas orientadas a estos límites. |
Clase PlaceContextualElement
Clase google.maps.places.PlaceContextualElement
Un widget que usa el token de contexto para mostrar una vista contextual de la respuesta de la Fundamentación con Google Maps.
Elemento personalizado:
<gmp-place-contextual context-token="string"></gmp-place-contextual>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceContextualElementOptions.
Para acceder, llama al const {PlaceContextualElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceContextualElement |
PlaceContextualElement([options])Parámetros:
|
Propiedades | |
|---|---|
contextToken |
Tipo:
string optionalEs el token de contexto.
Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceContextualElementOptions
Interfaz
google.maps.places.PlaceContextualElementOptions
Opciones para PlaceContextualElement.
Propiedades | |
|---|---|
contextToken optional |
Tipo:
string optionalEs el token de contexto que proporciona la respuesta de Fundamentación con Google Maps. |
Clase PlaceContextualListConfigElement
Clase google.maps.places.PlaceContextualListConfigElement
Es un elemento HTML que configura las opciones de la vista de lista del elemento contextual de lugar.
Elemento personalizado:
<gmp-place-contextual-list-config layout="compact" map-hidden></gmp-place-contextual-list-config>
Esta clase extiende HTMLElement.
Esta clase implementa PlaceContextualListConfigElementOptions.
Para acceder, llama al const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constructor | |
|---|---|
PlaceContextualListConfigElement |
PlaceContextualListConfigElement([options])Parámetros:
|
Propiedades | |
|---|---|
layout |
Tipo:
PlaceContextualListLayout optionalEl diseño
Atributo HTML:
|
mapHidden |
Tipo:
boolean optionalIndica si el mapa está oculto.
Atributo HTML:
|
Métodos | |
|---|---|
addEventListener |
addEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidConfigura una función a la que se llamará cada vez que se entregue el evento especificado al destino. Consulta addEventListener. |
removeEventListener |
removeEventListener(type, listener[, options])Parámetros:
Valor de retorno:
voidQuita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener. |
Interfaz PlaceContextualListConfigElementOptions
Interfaz
google.maps.places.PlaceContextualListConfigElementOptions
Opciones para PlaceContextualListConfigElement.
Propiedades | |
|---|---|
layout optional |
Tipo:
PlaceContextualListLayout optionalLa configuración predeterminada es
PlaceContextualListLayout.VERTICAL.El diseño |
mapHidden optional |
Tipo:
boolean optionalLa configuración predeterminada es
false.Es verdadero si se debe ocultar el mapa. |
Constantes de PlaceContextualListLayout
Constantes de
google.maps.places.PlaceContextualListLayout
Es la lista de diseños que admite el elemento contextual de lugar para la vista de lista.
Para acceder, llama al const {PlaceContextualListLayout} = await google.maps.importLibrary("places").
Consulta Bibliotecas de la API de Maps JavaScript.
Constantes | |
|---|---|
COMPACT |
Diseño de lista compacta: Los elementos de la lista se renderizan como vínculos en una sola línea, con desbordamientos en una lista desplegable. |
VERTICAL |
Diseño de lista vertical: Los elementos de la lista se renderizan como tarjetas en una lista vertical. |