Places Widgets

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.

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

Esta clase extiende HTMLElement.

Esta clase implementa PlaceAutocompleteElementOptions.

Para acceder, llama a const {PlaceAutocompleteElement} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parámetros: 
componentRestrictions
Tipo:  ComponentRestrictions optional
Las restricciones de componentes Las restricciones de componentes se usan para restringir las predicciones solo a aquellas dentro del componente superior. Por ejemplo, el país.
locationBias
Tipo:  LocationBias optional
Es un límite o una sugerencia flexible que se usa cuando se buscan lugares.
locationRestriction
Tipo:  LocationRestriction optional
Límites para restringir los resultados de la búsqueda.
name
Tipo:  string optional
Es 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 información.
Atributo HTML:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
Tipo:  string optional
Un identificador de idioma para el idioma en el que se deben mostrar 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:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Tipo:  string optional
Es un código de región que se usa para dar formato a los resultados y para filtrar 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 "Reino Unido de Gran Bretaña e Irlanda del Norte").
Atributo HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
Tipo:  Array<string> optional
Los tipos de predicciones que se mostrarán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifican tipos, se mostrarán todos.
Atributo HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
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 elemento prediction-item-main-text tiene el 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
El elemento cuando el usuario navega a él a través del teclado. Nota: Los elementos seleccionados se verán afectados por estos estilos de partes y por los estilos de partes de los elementos 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 de PlaceAutocompleteElement.
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que distingue mayúsculas de minúsculas y representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Establece una función a la que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que especifica el tipo de evento para el que se debe quitar un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador de eventos que se quitará del objetivo del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor que se muestra:  void
Quita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener.
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
Argumentos: 
Este evento se activa cuando un usuario selecciona una predicción de lugar. Contiene un objeto Place.
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
Argumentos: 
Este evento se activa cuando se rechaza una solicitud al backend (p.ej., una clave de API incorrecta). Este evento no se propaga.

Interfaz PlaceAutocompleteElementOptions

Interfaz de google.maps.places.PlaceAutocompleteElementOptions

Son opciones para construir un PlaceAutocompleteElement.
componentRestrictions optional
Tipo:  ComponentRestrictions optional
Ver PlaceAutocompleteElement.componentRestrictions
locationBias optional
Tipo:  LocationBias optional
Ver PlaceAutocompleteElement.locationBias
locationRestriction optional
Tipo:  LocationRestriction optional
Ver PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
Tipo:  string optional
Ver PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
Tipo:  string optional
Ver PlaceAutocompleteElement.requestedRegion
types optional
Tipo:  Array<string> optional
Ver PlaceAutocompleteElement.types

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.

Para acceder, llama a const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
Betaplace
Tipo:  Place

Clase PlaceAutocompleteRequestErrorEvent

Clase google.maps.places.PlaceAutocompleteRequestErrorEvent

PlaceAutocompleteElement emite este evento cuando hay un problema con la solicitud de red.

Esta clase extiende Event.

Para acceder, llama a const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.

Clase PlaceDetailsElement

Clase google.maps.places.PlaceDetailsElement

Es un elemento HTML que muestra los 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.

Para acceder, llama a const {PlaceDetailsElement} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
PlaceDetailsElement
PlaceDetailsElement([options])
Parámetros: 
place
Tipo:  Place optional
Solo lectura. Objeto Place que contiene el ID, la ubicación y el viewport del lugar renderizado actualmente.
size
Tipo:  PlaceDetailsSize optional
Es la variante de tamaño de PlaceDetailsElement. De forma predeterminada, el elemento mostrará PlaceDetailsSize.X_LARGE.
Atributo HTML:
  • <gmp-place-details size="small"></gmp-place-details>
  • <gmp-place-details size="medium"></gmp-place-details>
  • <gmp-place-details size="large"></gmp-place-details>
  • <gmp-place-details size="x-large"></gmp-place-details>
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que distingue mayúsculas de minúsculas y representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Establece una función a la que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
configureFromLocation
configureFromLocation(location)
Parámetros: 
  • location:  LatLng|LatLngLiteral Es la ubicación para la que se renderizarán los detalles del lugar.
Valor que se muestra:  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: 
  • place:  Place|{id:string} Es el lugar para renderizar los detalles.
Valor que se muestra:  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 Place.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que especifica el tipo de evento para el que se debe quitar un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador de eventos que se quitará del objetivo del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor que se muestra:  void
Quita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener.
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., una clave de API incorrecta). Este evento no se propaga.

Interfaz PlaceDetailsElementOptions

Interfaz de google.maps.places.PlaceDetailsElementOptions

Opciones para PlaceDetailsElement.
size optional
Tipo:  PlaceDetailsSize optional
Ver PlaceDetailsElement.size

Constantes de PlaceDetailsSize

Constantes de google.maps.places.PlaceDetailsSize

Variantes de tamaño para PlaceDetailsElement.

Para acceder, llama a const {PlaceDetailsSize} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
LARGE Variante grande que incluye una imagen grande, información básica y de contacto.
MEDIUM Variante mediana que incluye una imagen grande y información básica.
SMALL Variante pequeña que incluye una imagen pequeña y información básica.
X_LARGE Es una variante extragrande que incluye un collage de fotos, opiniones y una 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 lugares 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.

Para acceder, llama a const {PlaceListElement} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
PlaceListElement
PlaceListElement([options])
Parámetros: 
places
Tipo:  Array<Place>
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
Indica si los elementos de la lista se pueden seleccionar o no. Si es verdadero, los elementos de la lista serán botones que despacharán el evento gmp-placeselect cuando se haga clic en ellos. También se admite la navegación y selección con teclado accesible.
Atributo HTML:
  • <gmp-place-list selectable></gmp-place-list>
BetaaddEventListener
addEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que distingue mayúsculas de minúsculas y representa el tipo de evento que se debe escuchar.
  • listener:  EventListener|EventListenerObject Es el objeto que recibe una notificación. Debe ser una función o un objeto con el método handleEvent.
  • options:  boolean|AddEventListenerOptions optional Consulta las opciones. Los eventos personalizados solo admiten capture y passive.
Valor que se muestra:  void
Establece una función a la que se llamará cada vez que se envíe el evento especificado al destino. Consulta addEventListener.
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
Parámetros: 
  • request:  SearchByTextRequest Es la solicitud para la que se renderizan los resultados. La propiedad fields de SearchByTextRequest no es obligatoria.
Valor que se muestra:  Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.
Configura el widget para que renderice los resultados de la búsqueda de una solicitud a la API de Text Search de Places.
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
Parámetros: 
  • request:  SearchNearbyRequest Es la solicitud para la que se renderizan los resultados. La propiedad fields de SearchNearbyRequest no es obligatoria.
Valor que se muestra:  Promise<void> Es una promesa que se resuelve una vez que se cargan y renderizan los datos del lugar.
Configura el widget para que renderice los resultados de la búsqueda de una solicitud de la API de Places Nearby Search.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parámetros: 
  • type:  string Es una cadena que especifica el tipo de evento para el que se debe quitar un objeto de escucha de eventos.
  • listener:  EventListener|EventListenerObject Es el objeto de escucha de eventos del controlador de eventos que se quitará del objetivo del evento.
  • options:  boolean|EventListenerOptions optional Consulta las opciones.
Valor que se muestra:  void
Quita del destino un objeto de escucha de eventos registrado anteriormente con addEventListener. Consulta removeEventListener.
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., una clave de API incorrecta). Este evento no se propaga.

PlaceListElementOptions

Interfaz de google.maps.places.PlaceListElementOptions

Opciones para PlaceListElement.
selectable optional
Tipo:  boolean optional
Ver PlaceListElement.selectable

Clase PlaceListPlaceSelectEvent

Clase google.maps.places.PlaceListPlaceSelectEvent

PlaceListElement emite este evento cuando el usuario selecciona un lugar.

Esta clase extiende Event.

Para acceder, llama a const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
index
Tipo:  number
Es el índice de la lista del lugar seleccionado.
place
Tipo:  Place
Un objeto Place que contiene el ID, la ubicación y el viewport del lugar seleccionado.

Clase Autocomplete

Clase google.maps.places.Autocomplete

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 el texto.

Esta clase extiende MVCObject.

Para acceder, llama a const {Autocomplete} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
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 determinadas.
getBounds
getBounds()
Parámetros:  Ninguno
Valor que se muestra:  LatLngBounds|undefined Los límites de sesgo.
Muestra los límites en los que las predicciones están sesgadas.
getFields
getFields()
Parámetros:  Ninguno
Valor que se muestra:  Array<string>|undefined
Muestra los campos que se incluirán para el lugar en la respuesta de detalles cuando se recuperen correctamente los detalles. Para obtener una lista de campos, consulta PlaceResult.
getPlace
getPlace()
Parámetros:  Ninguno
Valor que se muestra:  PlaceResult El lugar que seleccionó el usuario.
Muestra los detalles del lugar que seleccionó el usuario si se recuperaron correctamente. De lo contrario, muestra un objeto Place stub, con la propiedad name establecida en el valor actual del campo de entrada.
setBounds
setBounds(bounds)
Parámetros: 
Valor que se muestra:  Ninguno
Establece el área preferida dentro de la cual se mostrarán los resultados de Place. Los resultados se personalizan, aunque no de manera exclusiva, conforme a esta área.
setComponentRestrictions
setComponentRestrictions(restrictions)
Parámetros: 
Valor que se muestra:  Ninguno
Establece las restricciones de los componentes. Las restricciones de componentes se usan para restringir las predicciones solo a aquellas dentro del componente superior. Por ejemplo, el país.
setFields
setFields(fields)
Parámetros: 
  • fields:  Array<string> optional
Valor que se muestra:  Ninguno
Establece los campos que se incluirán para el lugar en la respuesta de detalles cuando se recuperen correctamente los detalles. Para obtener una lista de campos, consulta PlaceResult.
setOptions
setOptions(options)
Parámetros: 
Valor que se muestra:  Ninguno
setTypes
setTypes(types)
Parámetros: 
  • types:  Array<string> optional Los tipos de predicciones que se incluirán.
Valor que se muestra:  Ninguno
Establece los tipos de predicciones que se mostrarán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifican tipos, se mostrarán todos.
Heredado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
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 el control no sugirió 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 de google.maps.places.AutocompleteOptions

Son las opciones que se pueden establecer en un objeto Autocomplete.
bounds optional
Es el área en la que se buscarán lugares.
componentRestrictions optional
Tipo:  ComponentRestrictions optional
Las restricciones de componentes Las restricciones de componentes se usan para restringir las predicciones solo a aquellas dentro del componente superior. 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 se recuperen correctamente los detalles, 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 puntos (por ejemplo, "geometry.location"). El valor predeterminado es ['ALL'].
placeIdOnly optional
Tipo:  boolean optional
Indica si se deben recuperar solo los IDs de lugar. El PlaceResult que se pondrá a disposición cuando se active el evento place_changed solo tendrá los campos place_id, types y name, con el 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 sus límites en el momento en que se envía la consulta. Si configuras strictBounds en false (que es la configuración predeterminada), los resultados se personalizarán, aunque no de manera exclusiva, conforme a los lugares contenidos dentro de los límites.
types optional
Tipo:  Array<string> optional
Los tipos de predicciones que se mostrarán. Para conocer los tipos compatibles, consulta la guía para desarrolladores. Si no se especifican tipos, se mostrarán todos.

Clase google.maps.places.SearchBox

Es un widget que proporciona predicciones de búsqueda 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 el texto.

Esta clase extiende MVCObject.

Para acceder, llama a const {SearchBox} = await google.maps.importLibrary("places"). Consulta Bibliotecas de la API de Maps JavaScript.
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 determinadas.
getBounds
getBounds()
Parámetros:  Ninguno
Valor que se muestra:  LatLngBounds|undefined
Muestra los límites hasta los cuales se sesgan las predicciones de búsqueda.
getPlaces
getPlaces()
Parámetros:  Ninguno
Valor que se muestra:  Array<PlaceResult>|undefined
Muestra la consulta que seleccionó el usuario para usar con el evento places_changed.
setBounds
setBounds(bounds)
Parámetros: 
Valor que se muestra:  Ninguno
Establece la región que se usará para sesgar las predicciones de consultas. Los resultados solo se orientarán a esta área y no se restringirán por completo a ella.
Heredado: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
Argumentos:  Ninguno
Este evento se activa cuando el usuario selecciona una consulta. Se debe usar getPlaces para obtener lugares nuevos.

Interfaz SearchBoxOptions

Interfaz de google.maps.places.SearchBoxOptions

Son las opciones que se pueden establecer en un objeto SearchBox.
bounds optional
Es el área hacia la que se deben sesgar las predicciones de consulta. Las predicciones se personalizan, aunque no de manera exclusiva, conforme a estas búsquedas.