Clase PlaceAutocompleteElement
Clase google.maps.places.PlaceAutocompleteElement
PlaceAutocompleteElement es una subclase de HTMLElement
que proporciona un componente de IU para la API de Places Autocomplete.
Elemento personalizado:
<gmp-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng|lat,lng,altitude" requested-language="string" requested-region="string" unit-system="metric|imperial" types="type1 type2 type3..."></gmp-place-autocomplete>
Esta clase extiende HTMLElement
.
Esta clase implementa PlaceAutocompleteElementOptions
.
Llama al const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Constructor | |
---|---|
PlaceAutocompleteElement |
PlaceAutocompleteElement(options) Parámetros:
|
Propiedades | |
---|---|
|
Tipo:
Array<string> optional Es el Tipo de lugar principal incluido (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 especifican tipos, se devuelven todos los tipos de Place. Atributo HTML:
|
|
Tipo:
Array<string> optional Solo se incluyen los resultados de las regiones especificadas, que se indican con hasta 15 códigos de región CLDR de dos caracteres. 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 optional Es un límite o una sugerencia flexible que se usa cuando se buscan lugares. |
locationRestriction |
Tipo:
LocationRestriction optional Son los límites para restringir los resultados de la búsqueda. |
name |
Tipo:
string optional 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:
|
|
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional Es 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 optional Es un identificador de idioma para el 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 limitan a este idioma. Consulta la lista de idiomas compatibles.
Atributo HTML:
|
requestedRegion |
Tipo:
string optional Es un código de región que se usa para el formato y el filtrado de los resultados. No restringe las sugerencias a este país. El código de región acepta un valor de ccTLD ("dominio de nivel superior") de dos caracteres. 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 de "El Reino Unido de Gran Bretaña e Irlanda del Norte").Atributo HTML:
|
|
Tipo:
UnitSystem optional Es el sistema de unidades que se usa para mostrar las distancias. Si no se especifica, el sistema de unidades se determina según el valor de requestedRegion.
Atributo HTML:
|
|
Tipo:
ComponentRestrictions optional Son las restricciones del componente. Las restricciones de componentes se usan para restringir las predicciones solo a las que se encuentran dentro del componente principal. Por ejemplo, el país. |
|
Tipo:
Array<string> optional Son los tipos de predicciones que se devolverán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifican tipos, se devolverán todos los tipos.
Atributo HTML:
|
Piezas | |
---|---|
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 del elemento de predicción 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 texto principal del elemento de predicción es 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 |
La figura que aparece cuando el usuario navega a un elemento a través del teclado. Nota: Los elementos seleccionados se verán afectados por los estilos de esta parte y por los estilos de la parte del elemento de predicción. |
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 del PlaceAutocompleteElement. |
Métodos | |
---|---|
|
addEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener. |
|
removeEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Quita del destino un objeto de escucha de eventos registrado previamente 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. |
|
function(placeAutocompletePlaceSelectEvent) Argumentos:
Este evento se activa cuando un usuario selecciona una predicción de lugar. Contiene un objeto Place. |
Interfaz PlaceAutocompleteElementOptions
Interfaz de google.maps.places.PlaceAutocompleteElementOptions
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 | |
---|---|
|
Tipo:
ComponentRestrictions optional |
|
Tipo:
Array<string> optional |
|
Tipo:
Array<string> optional |
locationBias optional |
Tipo:
LocationBias optional |
locationRestriction optional |
Tipo:
LocationRestriction optional |
name optional |
Tipo:
string optional |
|
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional |
requestedLanguage optional |
Tipo:
string optional |
|
Tipo:
Array<string> optional |
|
Tipo:
UnitSystem optional |
Clase PlaceAutocompletePlaceSelectEvent
Clase google.maps.places.PlaceAutocompletePlaceSelectEvent
Este evento se crea después de que el usuario selecciona un lugar con el elemento Place Autocomplete. Accede a la selección con event.place
.
Esta clase extiende Event
.
Llama al const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Propiedades | |
---|---|
|
Tipo:
Place |
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
.
Esta clase extiende Event
.
Llama al const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Propiedades | |
---|---|
placePrediction |
Tipo:
PlacePrediction |
Clase PlaceAutocompleteRequestErrorEvent
Clase google.maps.places.PlaceAutocompleteRequestErrorEvent
El evento se emite desde PlaceAutocompleteElement cuando hay un problema con la solicitud de red.
Esta clase extiende Event
.
Llama al const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Clase PlaceDetailsElement
Clase google.maps.places.PlaceDetailsElement
Es un elemento HTML que muestra detalles de un lugar. Usa los métodos configureFromPlace()
o configureFromLocation()
para especificar el contenido que se renderizará. Para usar el elemento Place Details, habilita la API de Places UI Kit para tu proyecto en la consola de Google Cloud.
Elemento personalizado:
<gmp-place-details size="small"></gmp-place-details>
Esta clase extiende HTMLElement
.
Esta clase implementa PlaceDetailsElementOptions
.
Llama al const {PlaceDetailsElement} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Constructor | |
---|---|
PlaceDetailsElement |
PlaceDetailsElement([options]) Parámetros:
|
Propiedades | |
---|---|
place |
Tipo:
Place optional Solo lectura. Objeto Place que contiene el ID, la ubicación y la ventana gráfica del lugar renderizado actualmente. |
size |
Tipo:
PlaceDetailsSize optional Es la variante de tamaño del PlaceDetailsElement. De forma predeterminada, el elemento mostrará
PlaceDetailsSize.X_LARGE .Atributo HTML:
|
Métodos | |
---|---|
|
addEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener. |
configureFromLocation |
configureFromLocation(location) Parámetros:
Valor de devolución:
Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.Configura el widget desde un LatLng con la geocodificación inversa. |
configureFromPlace |
configureFromPlace(place) Parámetros:
Valor de devolución:
Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.Configura el widget a partir de un objeto Place o un ID de lugar. |
|
removeEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener. |
Eventos | |
---|---|
gmp-load |
function(event) Argumentos:
Este evento se activa cuando el elemento carga y renderiza su contenido. Este evento no se propaga. |
gmp-requesterror |
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. |
Interfaz PlaceDetailsElementOptions
Interfaz de google.maps.places.PlaceDetailsElementOptions
Opciones para PlaceDetailsElement
.
Propiedades | |
---|---|
size optional |
Tipo:
PlaceDetailsSize optional |
Constantes de PlaceDetailsSize
Constantes de google.maps.places.PlaceDetailsSize
Son las variantes de tamaño para PlaceDetailsElement
.
Llama al const {PlaceDetailsSize} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Constantes | |
---|---|
LARGE |
Variante grande que incluye una imagen grande, información básica y de contacto. |
MEDIUM |
Variante mediana que incluye una imagen grande y la información básica. |
SMALL |
Es una variante pequeña que incluye una imagen pequeña y la información básica. |
X_LARGE |
Variante extra grande que incluye un collage de fotos, opiniones e información completa del lugar. |
Clase PlaceListElement
Clase google.maps.places.PlaceListElement
Es un elemento HTML que muestra los resultados de una búsqueda de lugar en una lista. Usa los métodos configureFromSearchByTextRequest()
o configureFromSearchNearbyRequest()
para especificar la solicitud para la que se renderizarán los resultados. Para usar el elemento de lista de lugares, habilita la API de Places UI Kit para tu proyecto en la consola de Google Cloud.
Elemento personalizado:
<gmp-place-list selectable></gmp-place-list>
Esta clase extiende HTMLElement
.
Esta clase implementa PlaceListElementOptions
.
Llama al const {PlaceListElement} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Constructor | |
---|---|
PlaceListElement |
PlaceListElement([options]) Parámetros:
|
Propiedades | |
---|---|
places |
Solo lectura. Es un array de objetos Place que contiene los IDs, las ubicaciones y los viewport de los lugares renderizados actualmente. |
selectable |
Tipo:
boolean Indica si los elementos de la lista se pueden seleccionar o no. Si es verdadero, los elementos de la lista serán botones que envían el evento
gmp-placeselect cuando se hace clic en ellos. También se admite la navegación y selección accesibles con el teclado.Atributo HTML:
|
Métodos | |
---|---|
|
addEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Configura una función que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener. |
configureFromSearchByTextRequest |
configureFromSearchByTextRequest(request) Parámetros:
Valor de devolución:
Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.Configura el widget para renderizar los resultados de la búsqueda a partir de una solicitud a la API de Places Text Search. |
configureFromSearchNearbyRequest |
configureFromSearchNearbyRequest(request) Parámetros:
Valor de devolución:
Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.Configura el widget para renderizar los resultados de búsqueda de una solicitud a la API de Places Nearby Search. |
|
removeEventListener(type, listener[, options]) Parámetros:
Valor de devolución:
void Quita del destino un objeto de escucha de eventos registrado previamente con addEventListener. Consulta removeEventListener. |
Eventos | |
---|---|
gmp-load |
function(event) Argumentos:
Este evento se activa cuando el elemento carga y renderiza su contenido. Este evento no se propaga. |
gmp-placeselect |
function(event) Argumentos:
Este evento se activa cuando un usuario selecciona un lugar. Contiene un objeto Place y el índice del lugar seleccionado en la lista. |
gmp-requesterror |
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. |
Interfaz de PlaceListElementOptions
Interfaz de google.maps.places.PlaceListElementOptions
Opciones para PlaceListElement
.
Propiedades | |
---|---|
selectable optional |
Tipo:
boolean optional |
Clase PlaceListPlaceSelectEvent
Clase google.maps.places.PlaceListPlaceSelectEvent
PlaceListElement
emite este evento cuando el usuario selecciona un lugar.
Esta clase extiende Event
.
Llama al const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en la API de Maps JavaScript.
Propiedades | |
---|---|
index |
Tipo:
number Índice de la lista del lugar seleccionado. |
place |
Tipo:
Place Es un objeto Place que contiene el ID, la ubicación y la ventana gráfica del lugar seleccionado. |
Clase Autocomplete
Clase google.maps.places.Autocomplete
Es un widget que proporciona predicciones de lugares 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
.
Llama al const {Autocomplete} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en 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 proporcionadas. |
Métodos | |
---|---|
getBounds |
getBounds() Parámetros: Ninguno
Valor de devolución:
LatLngBounds|undefined Los límites del ajuste.Devuelve los límites hacia los que se sesgan las predicciones. |
getFields |
getFields() Parámetros: Ninguno
Valor de devolución:
Array<string>|undefined Devuelve los campos que se incluirán para el lugar en la respuesta de detalles cuando estos se recuperen correctamente. Para obtener una lista de los campos, consulta PlaceResult . |
getPlace |
getPlace() Parámetros: Ninguno
Valor de devolución:
PlaceResult Es el lugar seleccionado por el usuario.Devuelve los detalles del lugar seleccionado por el usuario si se recuperaron correctamente. De lo contrario, devuelve un objeto Place de código auxiliar, 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 devolverán los resultados de Place. Los resultados se personalizan, aunque no de manera exclusiva, conforme a esta área. |
setComponentRestrictions |
setComponentRestrictions(restrictions) Parámetros:
Valor de retorno: Ninguno
Establece las restricciones del componente. Las restricciones de componentes se usan para restringir las predicciones solo a las que se encuentran dentro del componente principal. 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 los detalles se recuperen correctamente. Para obtener una lista de los 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 especifican tipos, se devolverán todos los tipos. |
Heredado:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Eventos | |
---|---|
place_changed |
function() Argumentos: Ninguno
Este evento se activa cuando un objeto PlaceResult está disponible para un lugar que seleccionó el usuario. 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, el objeto PlaceResult contiene la entrada del usuario en la propiedad name , sin ninguna otra propiedad definida. |
Interfaz de AutocompleteOptions
Interfaz de google.maps.places.AutocompleteOptions
Son las opciones que se pueden establecer en un objeto Autocomplete
.
Propiedades | |
---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optional Es el área en la que se buscarán lugares. |
componentRestrictions optional |
Tipo:
ComponentRestrictions optional Son las restricciones del componente. Las restricciones de componentes se usan para restringir las predicciones solo a las que se encuentran dentro del componente principal. Por ejemplo, el país. |
fields optional |
Tipo:
Array<string> optional Son 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 para las implementaciones de producción). Para obtener una lista de los campos, consulta PlaceResult . Los campos anidados se pueden especificar con rutas de puntos (por ejemplo, "geometry.location" ). El valor predeterminado es ['ALL'] . |
|
Tipo:
boolean optional Indica si se deben recuperar solo los IDs de lugar. El objeto PlaceResult que estará disponible cuando se active el evento place_changed solo tendrá los campos place_id, types y name, con los campos place_id, types y description que devuelve el servicio Autocomplete. Está inhabilitado de forma predeterminada. |
strictBounds optional |
Tipo:
boolean optional Es 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 búsqueda. Si configuras strictBounds como false (que es el valor predeterminado), los resultados se personalizarán, aunque no de manera exclusiva, conforme a los límites. |
types optional |
Tipo:
Array<string> optional Son los tipos de predicciones que se devolverán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifican tipos, se devolverán todos los tipos. |
Clase SearchBox
Clase google.maps.places.SearchBox
Es un widget que proporciona predicciones de búsqueda 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
.
Llama al const {SearchBox} = await google.maps.importLibrary("places")
para acceder.
Consulta Bibliotecas en 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 proporcionadas. |
Métodos | |
---|---|
getBounds |
getBounds() Parámetros: Ninguno
Valor de devolución:
LatLngBounds|undefined Devuelve los límites hacia los que se sesgan las predicciones de la búsqueda. |
getPlaces |
getPlaces() Parámetros: Ninguno
Valor de devolución:
Array<PlaceResult>|undefined Devuelve 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 personalizarán para esta área y no se restringirán por completo a ella. |
Heredado:
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 de SearchBoxOptions
Interfaz de google.maps.places.SearchBoxOptions
Son las opciones que se pueden establecer en un objeto SearchBox
.
Propiedades | |
---|---|
bounds optional |
Tipo:
LatLngBounds|LatLngBoundsLiteral optional Es el área hacia la que se sesgan las predicciones de la búsqueda. Las predicciones se personalizan, aunque no de manera exclusiva, conforme a las búsquedas que se dirigen a estos límites. |