Il widget Place Autocomplete crea un campo di immissione di testo, fornisce previsioni sui luoghi in un elenco di selezione dell'interfaccia utente e restituisce i dettagli del luogo in risposta alla selezione dell'utente. Utilizza il widget Place Autocomplete per incorporare nella tua pagina web un'interfaccia utente di completamento automatico completa e indipendente.
Prerequisiti
Per utilizzare Place Autocomplete (anteprima), devi abilitare "API Places" nel tuo progetto Google Cloud e specificare il canale beta (v: "beta") nel bootstrap loader. Per maggiori dettagli, consulta la guida introduttiva.
Novità
Il completamento automatico del luogo (anteprima) è stato migliorato nei seguenti modi:
- L'interfaccia utente del widget di completamento automatico supporta la localizzazione regionale (incluse le lingue RTL), per il segnaposto di input di testo, il logo dell'elenco delle previsioni e le previsioni dei luoghi.
- Accessibilità migliorata, compreso il supporto per screen reader e l'interazione con la tastiera.
- Il widget Autocomplete restituisce la nuova classe Place per semplificare la gestione dell'oggetto restituito.
- Supporto migliorato per dispositivi mobili e schermi piccoli.
- Prestazioni migliori e aspetto grafico migliorato.
Aggiungi un widget di completamento automatico
Puoi aggiungere un widget di completamento automatico a una pagina web o a una mappa Google. Il widget Autocomplete crea un campo di immissione di testo, fornisce previsioni sui luoghi in un elenco di selezione dell'interfaccia utente e restituisce i dettagli del luogo in risposta al clic di un utente tramite il listener gmp-placeselect. Questa sezione mostra come aggiungere un widget di completamento automatico a una pagina web o a una mappa Google.
Aggiungere un widget di completamento automatico a una pagina web
Per aggiungere il widget di completamento automatico a una pagina web, crea un nuovo elemento google.maps.places.PlaceAutocompleteElement e aggiungilo alla pagina come mostrato nell'esempio seguente:
TypeScript
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
JavaScript
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
Guarda l'esempio di codice completo
Aggiungere un widget di completamento automatico a una mappa
Per aggiungere un widget di completamento automatico a una mappa, crea una nuova istanza google.maps.places.PlaceAutocompleteElement, aggiungi PlaceAutocompleteElement a un div ed eseguine il push sulla mappa come controllo personalizzato, come mostrato nell'esempio seguente:
TypeScript
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
JavaScript
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";
const card = document.getElementById("place-autocomplete-card");
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
Guarda l'esempio di codice completo
Limita previsioni di completamento automatico
Per impostazione predefinita, Place Autocomplete presenta tutti i tipi di luogo, con una differenziazione per previsioni in prossimità della posizione dell'utente, e recupera tutti i campi di dati disponibili per il luogo selezionato dell'utente. Imposta le opzioni di completamento automatico della posizione per presentare previsioni più pertinenti, limitando o differenziando i risultati.
La limitazione dei risultati fa sì che il widget di completamento automatico ignori tutti i risultati al di fuori dell'area a limitazioni. È prassi comune limitare i risultati ai limiti della mappa. La differenziazione dei risultati consente al widget di completamento automatico di mostrare i risultati all'interno dell'area specificata, ma alcune corrispondenze potrebbero essere al di fuori di quell'area.
Limita la ricerca di luoghi per paese
Per limitare la ricerca di luoghi a uno o più paesi specifici, utilizza la proprietà componentRestrictions
per specificare i codici paese come mostrato nel seguente snippet:
const pac = new google.maps.places.PlaceAutocompleteElement({
componentRestrictions: {country: ['us', 'au']},
});
Limita la ricerca dei luoghi ai confini della mappa
Per limitare la ricerca di luoghi ai limiti di una mappa, utilizza la proprietà locationRestrictions
per aggiungere i limiti, come mostrato nello snippet seguente:
const pac = new google.maps.places.PlaceAutocompleteElement({
locationRestriction: map.getBounds(),
});
Quando limiti i limiti della mappa, assicurati di aggiungere un listener per aggiornare i limiti quando cambiano:
map.addListener('bounds_changed', () => {
autocomplete.locationRestriction = map.getBounds();
});
Per rimuovere locationRestriction, impostalo su null.
Risultati di ricerca per posizionamento bias
Applica la differenziazione dei risultati di ricerca a un'area del cerchio utilizzando la proprietà locationBias e
passando un raggio, come mostrato di seguito:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({
locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});
Per rimuovere locationBias, impostalo su null.
Limita i risultati di ricerca dei luoghi a determinati tipi
Limita i risultati di ricerca dei luoghi a determinati tipi di luoghi utilizzando la proprietà types e specificando uno o più tipi, come mostrato di seguito:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({
types: ['establishment'],
});
Per un elenco completo dei tipi supportati, consulta la Tabella 3: Tipi supportati nelle richieste di completamento automatico.
Visualizza i dettagli del luogo
Per ottenere i dettagli del luogo selezionato, aggiungi un listener gmp-place-select a PlaceAutocompleteElement, come mostrato nell'esempio seguente:
TypeScript
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
selectedPlaceTitle.textContent = 'Selected Place:';
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(), /* replacer */ null, /* space */ 2);
});
JavaScript
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
selectedPlaceTitle.textContent = "Selected Place:";
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(),
/* replacer */ null,
/* space */ 2,
);
});
Guarda l'esempio di codice completo
Nell'esempio precedente, il listener di eventi restituisce un oggetto Place class.
Chiama place.fetchFields() per recuperare i campi di dati Place Details
necessari per la tua applicazione.
Il listener nell'esempio successivo richiede le informazioni sul luogo e le visualizza su una mappa.
TypeScript
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content = '<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
'<span id="place-address">' + place.formattedAddress + '</span>' +
'</div>';
updateInfoWindow(content, place.location);
marker.position = place.location;
});
JavaScript
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content =
'<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' +
place.displayName +
"</span><br />" +
'<span id="place-address">' +
place.formattedAddress +
"</span>" +
"</div>";
updateInfoWindow(content, place.location);
marker.position = place.location;
});
Guarda l'esempio di codice completo
Ricevi risultati di geocodifica per il luogo selezionato
Per ottenere risultati di geocodifica per il luogo selezionato, utilizza google.maps.Geocoder per ottenere
la posizione, come mostrato nel seguente snippet:
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 50.064192, lng: -130.605469},
zoom: 3,
});
const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();
autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
const results = await geocoder.geocode({place.id});
marker.setPlace({
placeId: place.id,
location: results[0].geometry.location,
});
});
Mappe di esempio
Questa sezione contiene il codice completo per le mappe di esempio presenti in questa pagina.
Elemento di completamento automatico
Questo esempio aggiunge un widget di completamento automatico a una pagina web e mostra i risultati per ogni luogo selezionato.
TypeScript
async function initMap(): Promise<void> {
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
// Inject HTML UI.
const selectedPlaceTitle = document.createElement('p');
selectedPlaceTitle.textContent = '';
document.body.appendChild(selectedPlaceTitle);
const selectedPlaceInfo = document.createElement('pre');
selectedPlaceInfo.textContent = '';
document.body.appendChild(selectedPlaceInfo);
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
selectedPlaceTitle.textContent = 'Selected Place:';
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(), /* replacer */ null, /* space */ 2);
});
}
initMap();
JavaScript
async function initMap() {
// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);
// Inject HTML UI.
const selectedPlaceTitle = document.createElement("p");
selectedPlaceTitle.textContent = "";
document.body.appendChild(selectedPlaceTitle);
const selectedPlaceInfo = document.createElement("pre");
selectedPlaceInfo.textContent = "";
document.body.appendChild(selectedPlaceInfo);
// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
selectedPlaceTitle.textContent = "Selected Place:";
selectedPlaceInfo.textContent = JSON.stringify(
place.toJSON(),
/* replacer */ null,
/* space */ 2,
);
});
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
p {
font-family: Roboto, sans-serif;
font-weight: bold;
}
HTML
<html>
<head>
<title>Place Autocomplete element</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<p style="font-family: roboto, sans-serif">Search for a place here:</p>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
Prova Sample
Mappa con completamento automatico
Questo esempio mostra come aggiungere un widget di completamento automatico a una mappa di Google.
TypeScript
let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
// Request needed libraries.
//@ts-ignore
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary("marker"),
google.maps.importLibrary("places")
]);
// Initialize the map.
map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapId: '4504f8b37365c3d0',
mapTypeControl: false,
});
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';
const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
// Create the marker and infowindow
marker = new google.maps.marker.AdvancedMarkerElement({
map,
});
infoWindow = new google.maps.InfoWindow({});
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content = '<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' + place.displayName + '</span><br />' +
'<span id="place-address">' + place.formattedAddress + '</span>' +
'</div>';
updateInfoWindow(content, place.location);
marker.position = place.location;
});
}
// Helper function to create an info window.
function updateInfoWindow(content, center) {
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map,
anchor: marker,
shouldFocus: false,
});
}
initMap();
JavaScript
let map;
let marker;
let infoWindow;
async function initMap() {
// Request needed libraries.
//@ts-ignore
const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
google.maps.importLibrary("marker"),
google.maps.importLibrary("places"),
]);
// Initialize the map.
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 40.749933, lng: -73.98633 },
zoom: 13,
mapId: "4504f8b37365c3d0",
mapTypeControl: false,
});
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";
const card = document.getElementById("place-autocomplete-card");
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);
// Create the marker and infowindow
marker = new google.maps.marker.AdvancedMarkerElement({
map,
});
infoWindow = new google.maps.InfoWindow({});
// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
await place.fetchFields({
fields: ["displayName", "formattedAddress", "location"],
});
// If the place has a geometry, then present it on a map.
if (place.viewport) {
map.fitBounds(place.viewport);
} else {
map.setCenter(place.location);
map.setZoom(17);
}
let content =
'<div id="infowindow-content">' +
'<span id="place-displayname" class="title">' +
place.displayName +
"</span><br />" +
'<span id="place-address">' +
place.formattedAddress +
"</span>" +
"</div>";
updateInfoWindow(content, place.location);
marker.position = place.location;
});
}
// Helper function to create an info window.
function updateInfoWindow(content, center) {
infoWindow.setContent(content);
infoWindow.setPosition(center);
infoWindow.open({
map,
anchor: marker,
shouldFocus: false,
});
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#place-autocomplete-card {
background-color: #fff;
border-radius: 5px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
margin: 10px;
padding: 5px;
font-family: Roboto, sans-serif;
font-size: large;
font-weight: bold;
}
gmp-place-autocomplete {
width: 300px;
}
#infowindow-content .title {
font-weight: bold;
}
#map #infowindow-content {
display: inline;
}
HTML
<html>
<head>
<title>Place Autocomplete map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div class="place-autocomplete-card" id="place-autocomplete-card">
<p>Search for a place here:</p>
</div>
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
</body>
</html>
Prova Sample
Utilizzare il componente Selettore luogo
Nota: questo esempio utilizza una libreria open source. Consulta la pagina README per assistenza e feedback relativi alla libreria.
Il componente selettore di luoghi è un input di testo che consente agli utenti finali di cercare un indirizzo o un luogo specifico utilizzando il completamento automatico. Fa parte della libreria dei componenti estesi, un insieme di componenti web che consentono agli sviluppatori di creare più velocemente mappe e funzionalità di localizzazione migliori.
Configuratore del selettore di luoghi
Utilizza il configuratore per creare un codice incorporabile per un componente Selettore luoghi personalizzato, quindi esportalo in modo da utilizzarlo con i framework più diffusi come React e Angular o nessun framework.
Inizia
Per iniziare, carica la libreria dei componenti estesi con npm.
Per ottenere le migliori prestazioni, utilizza un gestore di pacchetti e importa solo i componenti necessari. Questo pacchetto è elencato su npm come @googlemaps/extended-component-library. Installalo con:
npm i @googlemaps/extended-component-library;
Quindi importa tutti i componenti che utilizzi nell'applicazione.
import '@googlemaps/extended-component-library/place_picker.js';
Dopo aver caricato la libreria npm, ottieni una chiave API dalla console Cloud.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>
Utilizza il tag del componente selettore luoghi.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
Per maggiori dettagli, consulta GitHub o npm. Per vedere i componenti utilizzati nel codice campione, consulta la pagina degli esempi su GitHub.