Ti diamo il benvenuto nella versione di anteprima del nuovo completamento automatico dei luoghi. Il completamento automatico è una funzionalità della libreria Places nell'API Maps JavaScript. Puoi utilizzare il completamento automatico per fornire alle tue applicazioni il comportamento di ricerca digitata del campo di ricerca di Google Maps. Il servizio di completamento automatico può creare corrispondenze con parole complete e sottostringhe, risolvendo nomi di luoghi, indirizzi e più codici. Le applicazioni possono quindi inviare query come tipo di utente per fornire previsioni immediate.
Prerequisiti
Per utilizzare Place Autocomplete (anteprima), devi abilitare "API Places" nel progetto Google Cloud e specificare il canale beta (v: "beta") nel bootstrap loader. Consulta la guida introduttiva per i dettagli.
Novità
Il completamento automatico dei luoghi (anteprima) è stato migliorato nei seguenti modi:
- La UI del widget di completamento automatico supporta la localizzazione a livello di regione (incluse le lingue RTL) per il segnaposto di input di testo, il logo dell'elenco delle previsioni e le previsioni sui luoghi.
- Accessibilità migliorata, che include il supporto per gli screen reader e l'interazione con la tastiera.
- Il widget Autocomplete restituisce la nuova Classe Place per semplificare la gestione dell'oggetto restituito.
- Migliore supporto per dispositivi mobili e schermi di piccole dimensioni.
- Prestazioni e aspetto grafico migliorati.
Aggiungere un widget di completamento automatico
Puoi aggiungere un widget di completamento automatico a una pagina web o a una mappa Google. Il widget di completamento automatico crea un campo di immissione di testo, fornisce le previsioni in un elenco di selezione dell'interfaccia utente e restituisce i dettagli sui luoghi in risposta a un clic dell'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 Autocomplete a una pagina web, crea un nuovo 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 elemento div ed esegui 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
Vincola previsioni di Completamento automatico
Per impostazione predefinita, il completamento automatico di Place Autocomplete presenta tutti i tipi di luogo, solo per previsioni relative alla località in cui si trova l'utente, e recupera tutti i campi di dati disponibili per il luogo selezionato dall'utente. Imposta le opzioni di Place Autocomplete per presentare previsioni più pertinenti limitando o differenziando i risultati.
Se limiti i risultati, il widget di completamento automatico ignora i risultati che si trovano al di fuori dell'area di limitazione. È 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 questa 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 nello snippet seguente:
const pac = new google.maps.places.PlaceAutocompleteElement({
componentRestrictions: {country: ['us', 'au']},
});
Limita la ricerca di 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, impostala su null.
Risultati di ricerca per luoghi con pregiudizi
Prevede il posizionamento dei risultati di ricerca in un'area circolare utilizzando la proprietà locationBias e passando un raggio, come mostrato qui:
const autocomplete = new google.maps.places.PlaceAutocompleteElement({
locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});
Per rimuovere locationBias, impostala su null.
Limita i risultati di ricerca di luoghi a determinati tipi
Limita i risultati della ricerca di 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 in uso.
Visualizza i dettagli del luogo
Per ottenere i dettagli sul luogo per il 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 di Classe Place.
Richiama place.fetchFields() per recuperare i campi di dati Place Details
necessari per la tua richiesta.
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
Ottieni risultati di geocodifica per il luogo selezionato
Per ottenere risultati di geocodifica per il luogo selezionato, utilizza google.maps.Geocoder per ottenere
la località, 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
In questo esempio viene aggiunto un widget Autocomplete a una pagina web e vengono visualizzati 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>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<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 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>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<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
Utilizzo del componente Selettore di luogo
Nota:questo esempio utilizza una libreria open source. Consulta la pagina README per ricevere assistenza e feedback relativi alla libreria.
Visualizza il completamento automatico dei luoghi con poche righe di codice utilizzando i componenti web.
Cosa sono i componenti web?
I componenti web ti consentono di creare tag HTML incapsulati personalizzati, riutilizzabili e utilizzabili ovunque nel codice HTML della tua app web. Sono supportati in tutti i browser moderni ed espongono un meccanismo indipendente dal framework per l'incapsulamento di UI e funzionalità.
Che cos'è il componente Selettore di luoghi?
Il componente selettore del luogo è un input di testo che consente agli utenti finali di cercare un indirizzo o un luogo specifico utilizzando il completamento automatico.
Che cos'è la libreria di componenti estesi?
La libreria di componenti estesa di Google Maps Platform è un insieme di componenti web che aiuta gli sviluppatori a creare mappe e funzionalità di localizzazione migliori più velocemente e con meno sforzo. Incapsula codice boilerplate, best practice e design reattivo, riducendo le interfacce complesse delle mappe in un unico elemento HTML. In definitiva, questi componenti semplificano la lettura, l'apprendimento, la personalizzazione e la gestione delle mappe e del codice relativo alla località.
Inizia
Per iniziare, carica la libreria dei componenti estesi con npm.
Per un rendimento ottimale, utilizza un gestore di pacchetti e importa solo i componenti necessari. Questo pacchetto è elencato in 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, richiedi 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 del luogo.
<gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%"> </gmpx-place-picker>
Per maggiori dettagli, visita GitHub o npm. Per visualizzare i componenti utilizzati nel codice campione, consulta la pagina degli esempi su GitHub.