Places Widgets

Classe PlaceAutocompleteElement

google.maps.places.PlaceAutocompleteElement corso

PlaceAutocompleteElement è una sottoclasse di HTMLElement che fornisce un componente dell'interfaccia utente per l'API Place Autocomplete.

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

Questa classe estende HTMLElement.

Questa classe implementa PlaceAutocompleteElementOptions.

Accedi chiamando const {PlaceAutocompleteElement} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
Parametri: 
componentRestrictions
Tipo:  ComponentRestrictions optional
Le limitazioni dei componenti. Le restrizioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese.
locationBias
Tipo:  LocationBias optional
Un confine o un suggerimento flessibile da utilizzare durante la ricerca di luoghi.
locationRestriction
Tipo:  LocationRestriction optional
Limiti per limitare i risultati di ricerca.
name
Tipo:  string optional
Il nome da utilizzare per l'elemento di immissione. Per informazioni dettagliate, visita la pagina https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name. Segue lo stesso comportamento dell'attributo name per gli input. Tieni presente che questo è il nome che verrà utilizzato quando viene inviato un modulo. Per maggiori dettagli, visita la pagina https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form.
Attributo HTML:
  • <gmp-placeautocomplete name="string"></gmp-placeautocomplete>
requestedLanguage
Tipo:  string optional
Un identificatore della lingua in cui devono essere restituiti i risultati, se possibile. I risultati nella lingua selezionata potrebbero avere un ranking più elevato, ma i suggerimenti non sono limitati a questa lingua. Consulta l'elenco delle lingue supportate.
Attributo HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
Tipo:  string optional
Un codice regione utilizzato per la formattazione e il filtraggio dei risultati. Non limita i suggerimenti a questo paese. Il codice regione accetta un valore di due caratteri di ccTLD ("dominio di primo livello"). La maggior parte dei codici ccTLD è identica ai codici ISO 3166-1, con alcune eccezioni notevoli. Ad esempio, il TLD di primo livello del Regno Unito è "uk " (.co.uk), mentre il codice ISO 3166-1 è"gb " (tecnicamente per l'entità "Regno Unito di Gran Bretagna e Irlanda del Nord").
Attributo HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
types
Tipo:  Array<string> optional
I tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi.
Attributo HTML:
  • <gmp-place-autocomplete types="type1 type2 type3..."></gmp-place-autocomplete>
prediction-item
Un elemento nel menu a discesa delle previsioni che rappresenta una singola previsione.
prediction-item-icon
L'icona visualizzata a sinistra di ogni elemento nell'elenco delle previsioni.
prediction-item-main-text
Una parte di elemento di previsione che corrisponde al testo principale della previsione. Per le località geografiche, contiene il nome di un luogo, ad esempio "Sydney", o il nome e il numero di una via, ad esempio "10 King Street". Per impostazione predefinita, il testo principale dell'elemento di previsione è nero. Se in prediction-item è presente del testo aggiuntivo, questo non fa parte di prediction-item-main-text e ne eredita lo stile da prediction-item. È di colore grigio per impostazione predefinita. Il testo aggiuntivo è in genere un indirizzo.
prediction-item-match
La parte della previsione restituita che corrisponde all'input dell'utente. Per impostazione predefinita, il testo corrispondente viene evidenziato in grassetto. Tieni presente che il testo corrispondente pu�� trovarsi in qualsiasi punto di prediction-item. Non fa necessariamente parte di prediction-item-main-text.
prediction-item-selected
L'elemento quando l'utente vi accede tramite la tastiera. Nota: gli elementi selezionati saranno interessati sia da questi stili di parte sia dagli stili di parte degli elementi di previsione.
prediction-list
L'elemento visivo contenente l'elenco delle previsioni restituite dal servizio di completamento automatico dei luoghi. Questo elenco viene visualizzato come elenco a discesa sotto PlaceAutocompleteElement.
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa sensibile alle maiuscole che rappresenta il tipo di evento da ascoltare.
  • listener:  EventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • options:  boolean|AddEventListenerOptions optional consulta le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:void
Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato al target. Vedi addEventListener
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per cui rimuovere un gestore di eventi.
  • listener:  EventListener|EventListenerObject Il listener di eventi dell'handler dell'evento da rimuovere dal target dell'evento.
  • options:  boolean|EventListenerOptions optional consulta le opzioni
Valore restituito:void
Rimuove dal target un gestore di eventi precedentemente registrato con addEventListener. Vedi removeEventListener
gmp-placeselect
function(placeAutocompletePlaceSelectEvent)
Argomenti: 
Questo evento viene attivato quando un utente seleziona una previsione di luogo. Contiene un oggetto Place.
gmp-requesterror
function(placeAutocompleteRequestErrorEvent)
Argomenti: 
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene visualizzato.

Interfaccia PlaceAutocompleteElementOptions

google.maps.places.PlaceAutocompleteElementOptions interfaccia

Opzioni per la costruzione di un elemento PlaceAutocomplete.
componentRestrictions optional
Tipo:  ComponentRestrictions optional
Visualizza PlaceAutocompleteElement.componentRestrictions
locationBias optional
Tipo:  LocationBias optional
Visualizza PlaceAutocompleteElement.locationBias
locationRestriction optional
Tipo:  LocationRestriction optional
Visualizza PlaceAutocompleteElement.locationRestriction
requestedLanguage optional
Tipo:  string optional
Visualizza PlaceAutocompleteElement.requestedLanguage
requestedRegion optional
Tipo:  string optional
Visualizza PlaceAutocompleteElement.requestedRegion
types optional
Tipo:  Array<string> optional
Visualizza PlaceAutocompleteElement.types

Classe PlaceAutocompletePlaceSelectEvent

google.maps.places.PlaceAutocompletePlaceSelectEvent corso

Questo evento viene creato dopo che l'utente seleziona un luogo con l'elemento Place Autocomplete. Accedi alla selezione con event.place.

Questa classe estende Event.

Accedi chiamando const {PlaceAutocompletePlaceSelectEvent} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
Betaplace
Tipo:  Place

Classe PlaceAutocompleteRequestErrorEvent

google.maps.places.PlaceAutocompleteRequestErrorEvent corso

Questo evento viene emesso da PlaceAutocompleteElement in caso di problemi con la richiesta di rete.

Questa classe estende Event.

Accedi chiamando const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.

Classe PlaceDetailsElement

google.maps.places.PlaceDetailsElement corso

Un elemento HTML che mostra i dettagli di un luogo. Utilizza i metodi configureFromPlace() o configureFromLocation() per specificare i contenuti da visualizzare. Per utilizzare l'elemento Dettagli dei luoghi, abilita l'API Places UI Kit per il tuo progetto nella console Google Cloud.

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

Questa classe estende HTMLElement.

Questa classe implementa PlaceDetailsElementOptions.

Accedi chiamando const {PlaceDetailsElement} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
PlaceDetailsElement
PlaceDetailsElement([options])
Parametri: 
place
Tipo:  Place optional
Di sola lettura. Oggetto Place contenente l'ID, la posizione e l'area visibile del luogo attualmente visualizzato.
size
Tipo:  PlaceDetailsSize optional
La variante delle dimensioni di PlaceDetailsElement. Per impostazione predefinita, l'elemento mostrerà PlaceDetailsSize.X_LARGE.
Attributo 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])
Parametri: 
  • type:  string una stringa sensibile alle maiuscole che rappresenta il tipo di evento da ascoltare.
  • listener:  EventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • options:  boolean|AddEventListenerOptions optional consulta le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:void
Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato al target. Vedi addEventListener
configureFromLocation
configureFromLocation(location)
Parametri: 
Valore restituito:Promise<void> una promessa che si risolve una volta caricati e visualizzati i dati dei luoghi.
Configura il widget da un LatLng utilizzando il geocodifica inversa.
configureFromPlace
configureFromPlace(place)
Parametri: 
  • place:  Place|{id:string} il luogo per cui eseguire il rendering dei dettagli.
Valore restituito:Promise<void> una promessa che si risolve una volta caricati e visualizzati i dati dei luoghi.
Configura il widget da un oggetto Place o da un ID luogo.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per cui rimuovere un gestore di eventi.
  • listener:  EventListener|EventListenerObject Il listener di eventi dell'handler dell'evento da rimuovere dal target dell'evento.
  • options:  boolean|EventListenerOptions optional consulta le opzioni
Valore restituito:void
Rimuove dal target un gestore di eventi precedentemente registrato con addEventListener. Vedi removeEventListener
gmp-load
function(event)
Argomenti: 
Questo evento viene attivato quando l'elemento carica e esegue il rendering dei relativi contenuti. Questo evento non viene visualizzato.
gmp-requesterror
function(event)
Argomenti: 
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene visualizzato.

Interfaccia PlaceDetailsElementOptions

google.maps.places.PlaceDetailsElementOptions interfaccia

Opzioni per PlaceDetailsElement.
size optional
Tipo:  PlaceDetailsSize optional
Visualizza PlaceDetailsElement.size

Costanti PlaceDetailsSize

google.maps.places.PlaceDetailsSize costanti

Varianti di taglia per PlaceDetailsElement.

Accedi chiamando const {PlaceDetailsSize} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
LARGE Una variante grande che include un'immagine grande, informazioni di base e dati di contatto.
MEDIUM Variante media che include un'immagine di grandi dimensioni e informazioni di base.
SMALL Variante piccola che include un'immagine di piccole dimensioni e informazioni di base.
X_LARGE Variante extra large che include un collage di foto, recensioni e informazioni complete sul luogo.

Classe PlaceListElement

google.maps.places.PlaceListElement corso

Un elemento HTML che mostra i risultati di una ricerca di luoghi in un elenco. Utilizza i metodi configureFromSearchByTextRequest() o configureFromSearchNearbyRequest() per specificare la richiesta per cui visualizzare i risultati. Per utilizzare l'elemento elenco di luoghi, abilita l'API Places UI Kit per il tuo progetto nella console Google Cloud.

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

Questa classe estende HTMLElement.

Questa classe implementa PlaceListElementOptions.

Accedi chiamando const {PlaceListElement} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
PlaceListElement
PlaceListElement([options])
Parametri: 
places
Tipo:  Array<Place>
Di sola lettura. Array di oggetti Place contenenti gli ID, le posizioni e le visualizzazioni dei luoghi attualmente visualizzati.
selectable
Tipo:  boolean
Indica se gli elementi dell'elenco sono selezionabili o meno. Se il valore è true, gli elementi dell'elenco saranno pulsanti che inviano l'evento gmp-placeselect al loro clic. Sono supportate anche la navigazione e la selezione con tastiera accessibili.
Attributo HTML:
  • <gmp-place-list selectable></gmp-place-list>
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa sensibile alle maiuscole che rappresenta il tipo di evento da ascoltare.
  • listener:  EventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • options:  boolean|AddEventListenerOptions optional consulta le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:void
Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato al target. Vedi addEventListener
configureFromSearchByTextRequest
configureFromSearchByTextRequest(request)
Parametri: 
  • request:  SearchByTextRequest la richiesta per cui visualizzare i risultati. La proprietà fields di SearchByTextRequest non è obbligatoria.
Valore restituito:Promise<void> una promessa che si risolve una volta caricati e visualizzati i dati dei luoghi.
Configura il widget in modo da visualizzare i risultati di ricerca da una richiesta all'API Places Text Search.
configureFromSearchNearbyRequest
configureFromSearchNearbyRequest(request)
Parametri: 
  • request:  SearchNearbyRequest la richiesta per cui visualizzare i risultati. La proprietà fields di SearchNearbyRequest non è obbligatoria.
Valore restituito:Promise<void> una promessa che si risolve una volta caricati e visualizzati i dati dei luoghi.
Configura il widget in modo da visualizzare i risultati di ricerca da una richiesta dell'API Places Nearby Search.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per cui rimuovere un gestore di eventi.
  • listener:  EventListener|EventListenerObject Il listener di eventi dell'handler dell'evento da rimuovere dal target dell'evento.
  • options:  boolean|EventListenerOptions optional consulta le opzioni
Valore restituito:void
Rimuove dal target un gestore di eventi precedentemente registrato con addEventListener. Vedi removeEventListener
gmp-load
function(event)
Argomenti: 
Questo evento viene attivato quando l'elemento carica e esegue il rendering dei relativi contenuti. Questo evento non viene visualizzato.
gmp-placeselect
function(event)
Argomenti: 
Questo evento viene attivato quando un utente seleziona un luogo. Contiene un oggetto Place e l'indice del luogo selezionato nell'elenco.
gmp-requesterror
function(event)
Argomenti: 
Questo evento viene attivato quando una richiesta al backend è stata rifiutata (ad es. chiave API errata). Questo evento non viene visualizzato.

Interfaccia PlaceListElementOptions

google.maps.places.PlaceListElementOptions interfaccia

Opzioni per PlaceListElement.
selectable optional
Tipo:  boolean optional
Visualizza PlaceListElement.selectable

Classe PlaceListPlaceSelectEvent

google.maps.places.PlaceListPlaceSelectEvent corso

Questo evento viene emesso da PlaceListElement quando l'utente seleziona un luogo.

Questa classe estende Event.

Accedi chiamando const {PlaceListPlaceSelectEvent} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
index
Tipo:  number
L'indice dell'elenco del luogo selezionato.
place
Tipo:  Place
Un oggetto Place contenente l'ID, la posizione e l'area visibile del luogo selezionato.

Classe Autocomplete

google.maps.places.Autocomplete corso

Un widget che fornisce previsioni sui luoghi in base all'input di testo di un utente. Si attacca a un elemento di input di tipo text e ascolta l'inserimento di testo in quel campo. L'elenco delle previsioni viene visualizzato come elenco a discesa e viene aggiornato man mano che viene inserito il testo.

Questa classe estende MVCObject.

Accedi chiamando const {Autocomplete} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
Autocomplete
Autocomplete(inputField[, opts])
Parametri: 
Crea una nuova istanza di Autocomplete che si associa al campo di testo di immissione specificato con le opzioni indicate.
getBounds
getBounds()
Parametri: nessuno
Valore restituito:  LatLngBounds|undefined i limiti di bias.
Restituisce i limiti entro i quali le previsioni sono viziate.
getFields
getFields()
Parametri: nessuno
Valore restituito:Array<string>|undefined
Restituisce i campi da includere per il luogo nella risposta dei dettagli quando i dettagli vengono recuperati correttamente. Per un elenco dei campi, consulta PlaceResult.
getPlace
getPlace()
Parametri: nessuno
Valore restituito:PlaceResult il luogo selezionato dall'utente.
Restituisce i dettagli del luogo selezionato dall'utente, se sono stati recuperati correttamente. In caso contrario, restituisce un oggetto Place stub con la proprietà name impostata sul valore corrente del campo di immissione.
setBounds
setBounds(bounds)
Parametri: 
Valore restituito:nessuno
Imposta l'area preferita in cui restituire i risultati relativi ai luoghi. I risultati sono orientati a questa area, ma non sono limitati a essa.
setComponentRestrictions
setComponentRestrictions(restrictions)
Parametri: 
Valore restituito:nessuno
Imposta le limitazioni dei componenti. Le restrizioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese.
setFields
setFields(fields)
Parametri: 
  • fields:  Array<string> optional
Valore restituito:nessuno
Imposta i campi da includere per il luogo nella risposta dei dettagli quando i dettagli vengono recuperati correttamente. Per un elenco dei campi, consulta PlaceResult.
setOptions
setOptions(options)
Parametri: 
Valore restituito:nessuno
setTypes
setTypes(types)
Parametri: 
  • types:  Array<string> optional i tipi di previsioni da includere.
Valore restituito:nessuno
Imposta i tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi.
Ereditato: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
place_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando un PlaceResult viene reso disponibile per un luogo selezionato dall'utente.
Se l'utente inserisce il nome di un luogo che non è stato suggerito dal controllo e preme il tasto Invio oppure se una richiesta di dettagli sul luogo non va a buon fine, PlaceResult contiene l'input dell'utente nella proprietà name, senza altre proprietà definite.

Interfaccia AutocompleteOptions

google.maps.places.AutocompleteOptions interfaccia

Le opzioni che possono essere impostate su un oggetto Autocomplete.
bounds optional
L'area in cui cercare i luoghi.
componentRestrictions optional
Tipo:  ComponentRestrictions optional
Le limitazioni dei componenti. Le restrizioni dei componenti vengono utilizzate per limitare le previsioni solo a quelle all'interno del componente principale. Ad esempio, il paese.
fields optional
Tipo:  Array<string> optional
I campi da includere per il luogo nella risposta dei dettagli quando i dettagli vengono recuperati correttamente, per i quali verrà addebitato un costo. Se viene passato ['ALL'], verranno restituiti e fatturati tutti i campi disponibili (questa operazione non è consigliata per i deployment di produzione). Per un elenco dei campi, consulta PlaceResult. I campi nidificati possono essere specificati con percorsi con puntini (ad esempio "geometry.location"). Il valore predefinito è ['ALL'].
placeIdOnly optional
Tipo:  boolean optional
Indica se recuperare solo gli ID luogo. Il risultato PlaceResult reso disponibile quando viene attivato l'evento place_changed avrà solo i campi place_id, types e name, con place_id, types e description restituiti dal servizio di completamento automatico. Disattivata per impostazione predefinita.
strictBounds optional
Tipo:  boolean optional
Un valore booleano che indica che il widget di completamento automatico deve restituire solo i luoghi che si trovano all'interno dei suoi limiti al momento dell'invio della query. Se imposti strictBounds su false (il valore predefinito), i risultati saranno orientati verso, ma non limitati a, i luoghi contenuti nei limiti.
types optional
Tipo:  Array<string> optional
I tipi di previsioni da restituire. Per i tipi supportati, consulta la guida per gli sviluppatori. Se non vengono specificati tipi, verranno restituiti tutti i tipi.

google.maps.places.SearchBox corso

Un widget che fornisce previsioni sulle query in base all'input di testo di un utente. Si attacca a un elemento di input di tipo text e ascolta l'inserimento di testo in quel campo. L'elenco delle previsioni viene visualizzato come elenco a discesa e viene aggiornato man mano che viene inserito il testo.

Questa classe estende MVCObject.

Accedi chiamando const {SearchBox} = await google.maps.importLibrary("places"). Consulta la sezione Librerie nell'API Maps JavaScript.
SearchBox
SearchBox(inputField[, opts])
Parametri: 
Crea una nuova istanza di SearchBox che si associa al campo di testo di immissione specificato con le opzioni indicate.
getBounds
getBounds()
Parametri: nessuno
Valore restituito:LatLngBounds|undefined
Restituisce i limiti entro i quali le previsioni delle query sono viziate.
getPlaces
getPlaces()
Parametri: nessuno
Valore restituito:Array<PlaceResult>|undefined
Restituisce la query selezionata dall'utente da utilizzare con l'evento places_changed.
setBounds
setBounds(bounds)
Parametri: 
Valore restituito:nessuno
Imposta la regione da utilizzare per creare un bias nelle previsioni delle query. I risultati saranno orientati solo a questa area e non saranno completamente limitati a questa.
Ereditato: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando l'utente seleziona una query. getPlaces deve essere utilizzato per ottenere nuovi luoghi.

Interfaccia SearchBoxOptions

google.maps.places.SearchBoxOptions interfaccia

Le opzioni che possono essere impostate su un oggetto SearchBox.
bounds optional
L'area verso cui orientare le previsioni delle query. Le previsioni sono orientate, ma non limitate, alle query che hanno come target questi intervalli.