Panoramica
Google Maps Platform è disponibile per il web (JS, TS), Android e iOS, e offre anche API di servizi web per ottenere informazioni su luoghi, e distanze. Gli esempi in questa guida sono scritti per una singola piattaforma, ma vengono forniti link alla documentazione per l'implementazione su altre piattaforme.
Quick Builder nel La console Google Cloud ti consente di creare il completamento automatico dei moduli degli indirizzi utilizzando un UI interattiva che genera codice JavaScript per te.
Lo shopping e gli ordini online sono diventati una parte onnipresente delle nostre vite. Dello stesso giorno di servizi di consegna a domicilio, a prenotare un taxi o ordinare una cena, i clienti si aspettano procedura di pagamento fluida.
In tutte queste applicazioni, tuttavia, l'inserimento di indirizzi per la fatturazione o la spedizione rimangono un ostacolo nel flusso di pagamento, che può essere complesso e complesso. Un'esperienza di pagamento fluida diventa ancora più importante nel mondo dei dispositivi mobili, per cui l'inserimento di testo complesso su uno schermo piccolo può essere frustrante un'altra barriera alla conversione dei clienti.
Questo argomento fornisce indicazioni sull'implementazione per aiutare i clienti a velocizzare il loro procedura di pagamento con inserimento dell'indirizzo predittivo.
Il seguente diagramma mostra le API principali coinvolte nell'implementazione di Google Checkout (fai clic per ingrandire).
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=4&hl=it)
Abilitazione delle API in corso…
Per implementare Google Pay, devi abilitare le seguenti API nella console Google Cloud:
Per ulteriori informazioni sulla configurazione, vedi Guida introduttiva all'utilizzo di Google Maps Platform.
Sezioni degli allenamenti
Di seguito sono riportati i suggerimenti e le personalizzazioni che tratteremo in questo argomento.
- L'icona del segno di spunta è una pratica di base.
- L'icona a forma di stella è una personalizzazione facoltativa, ma consigliata per migliorare la soluzione.
Aggiunta del completamento automatico ai campi di immissione | Compilazione automatica di un modulo per l'indirizzo. Aggiungi la funzionalità di digitazione a consumo per migliorare l'utente su tutte le piattaforme e migliorare la precisione degli indirizzi premendo il minimo sforzo. | |
Fornire una conferma visiva con l'API Maps Static | Trovare le coordinate di latitudine/longitudine per un determinato indirizzo (geocodifica), o convertire le coordinate di latitudine/longitudine di una posizione geografica in un indirizzo (geocodifica inversa). | |
Suggerimenti per migliorare ulteriormente l'esperienza di pagamento | Utilizza le funzionalità avanzate di Place Autocomplete per rendere l'esperienza di pagamento ancora meglio. |
Aggiunta del completamento automatico ai campi di immissione
In questo esempio vengono utilizzati: API Places Library, Maps JavaScript | Disponibile anche: Android | iOS |
Completamento automatico dei luoghi semplifica l'inserimento degli indirizzi nella tua app, generando tassi di conversione più elevati e senza interruzioni per i tuoi clienti. Il completamento automatico fornisce un unico campo di immissione rapido con "type-ahead" di fatturazione, che può essere utilizzata per compilare automaticamente modulo per l'indirizzo di spedizione.
Incorporando Place Autocomplete nel tuo carrello degli acquisti online, puoi:
- Riduci gli errori di inserimento degli indirizzi.
- Riduci il numero di passaggi nella procedura di pagamento.
- Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
- Ridurre significativamente le sequenze di tasti e il tempo totale necessario al cliente per ordine.
Quando l'utente seleziona la casella di immissione Completamento automatico e inizia a digitare, viene visualizzato un elenco vengono visualizzate le previsioni:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=4&hl=it)
Quando l'utente seleziona un indirizzo dall'elenco di previsioni, puoi utilizzare la risposta per verificare l'indirizzo e recuperare la posizione. La tua applicazione potrà quindi compilare i campi corretti del modulo di inserimento dell'indirizzo:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=4&hl=it)
Video: Migliora i moduli degli indirizzi con il completamento automatico dei luoghi:
Moduli per gli indirizzi
Web
Android
iOS
Introduzione a Place Autocomplete
Sono necessarie solo un paio di righe di codice JavaScript per incorporare Place Autcomplete in nel tuo sito.
Il modo più semplice è includere l'API Maps JavaScript (anche se (non visualizzare una mappa) sul tuo sito e specifica la libreria Places come mostrato nell'esempio seguente, che esegue anche la funzione di inizializzazione.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
Successivamente, aggiungi una casella di testo alla pagina per l'input dell'utente:
<input id="autocomplete" placeholder="Enter your address"></input>
Infine, inizializza il servizio Autocomplete e collegalo alla casella di testo denominata:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
Nell'esempio precedente, il listener di eventi place_changed
viene attivato quando
l'utente seleziona una previsione dell'indirizzo e
Viene eseguita la funzione fillInAddress
.
La funzione, come mostrato nell'esempio seguente, prende la risposta selezionata e
estrae i componenti dell'indirizzo da visualizzare all'interno di un modulo.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
Quando disponi di questi dati, puoi utilizzarli come indirizzo corrispondente per l'utente. Da alcuni righe di codice, puoi assicurarti che il cliente inserisca l'indirizzo corretto in poco tempo nel tempo.
Guarda una demo funzionante e il codice sorgente completo per compilare un modulo di inserimento dell'indirizzo in questo codice esempio.
Considerazioni per l'implementazione del completamento automatico del luogo
Place Autocomplete offre una serie di opzioni che gli consentono di essere flessibile con se vuoi usare altri prodotti oltre al widget. Puoi utilizzare una combinazione per ottenere esattamente ciò di cui hai bisogno per associare una sede nel modo corretto.
-
Per un modulo per l'indirizzo, imposta il parametro
types
suaddress
in limita le corrispondenze agli indirizzi completi. Scopri di più su tipi supportati nelle richieste di completamento automatico del luogo. -
Imposta le limitazioni appropriate
e pregiudizi se non hai bisogno
di effettuare ricerche a livello mondiale. Esistono numerosi parametri che possono
può essere utilizzata solo per differenziare o limitare qualsiasi corrispondenza a regioni specifiche.
-
Usa
bounds
per impostare i limiti rettangolari da applicare a un'area, usastrictBounds
per assicurarti che vengano restituiti solo gli indirizzi in quelle aree. -
Utilizza
componentRestrictions
per limitare le risposte a un determinato insieme di paesi.
-
Usa
- Lascia i campi modificabili nel caso in cui alcuni campi non vengano trovati nella corrispondenza e consenti ai clienti per aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti da Place Autocomplete non contengono numeri di locali secondari, come numeri di appartamenti, interni o unità, questi esempio sposta lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a compilare le informazioni necessarie.
Fornisci una conferma visiva con l'API Maps Static
Dopo l'inserimento dell'indirizzo, fornisci all'utente una conferma visiva del luogo di consegna o ritiro con una semplice mappa statica. Questo approccio offre al cliente un'ulteriore garanzia che che l'indirizzo sia corretto e ridurrà gli errori di consegna/ritiro. La mappa statica può essere visualizzata sulla pagina in cui inseriscono l'indirizzo o persino inviato nell'email di conferma quando hanno completato la transazione.
Entrambi questi casi d'uso possono essere realizzati API Maps Static, che aggiunge una versione immagine della mappa a qualsiasi tag immagine all'interno di una pagina o di un'email.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/checkout/track_package.png?authuser=4&hl=it)
Introduzione all'API Maps Static
Puoi utilizzare l'API Maps Static con una chiamata al servizio web, che creerà la versione immagine di una mappa in base ai parametri specificati. Come la mappa dinamica, specificare il tipo di mappa, utilizzare gli stessi stili basati su cloud e aggiungere indicatori distinguere la località.
La chiamata che segue mostra una roadmap, di dimensioni di 600 x 300 px, incentrata sul Googleplex a Mountain View, CA a livello di zoom 13. Indica anche una località di consegna blu un indicatore e uno stile di mappa online.
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
Questa sezione è suddivisa nelle seguenti sezioni:
URL API | https://maps.googleapis.com/maps/api/staticmap? |
centro mappa | centro=37.422177,-122.084082 |
livello di zoom | zoom=13 |
dimensioni delle immagini | dimensione=600x300 |
tipo di mappa | maptype=roadmap |
indicatori di posizione del negozio | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
stile mappa cloud | map_id=8f348d1b5a61d4bb |
Chiave API | chiave=YOUR_API_KEY |
Parametro canale della soluzione (consulta il documentazione relativa ai parametri) | solution_channel=GMP_guides_checkout_v1_a |
Questa diventa l'immagine come mostrato di seguito:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/maps/solutions/images/checkout/static_map.png?authuser=4&hl=it)
Per ulteriori informazioni sulle opzioni dell'API Maps Static, consulta documentazione.
Suggerimenti per migliorare ulteriormente la procedura di pagamento
Puoi migliorare ulteriormente la customer experience sfruttando alcune delle funzionalità avanzate funzioni che Place Autocomplete ha da offrire. Di seguito sono riportati alcuni suggerimenti per migliorare Casella di immissione dell'indirizzo con completamento automatico:
-
Place Details (Dettagli sul luogo).
Per consentire l'inserimento sia di indirizzi sia di nomi di attività, rimuovi
types
dalla definizione di Completamento automatico.
Consenti agli utenti di inserire un indirizzo in base al nome dell'attività commerciale o di un punto d'interesse.
L'opzione "digita in anticipo" di previsione non solo funziona per gli indirizzi, ma puoi anche
consentire l'inserimento di nomi di attività o punti di riferimento. Dopo che un utente inserisce il nome di un'attività,
è facile recuperare l'indirizzo con una chiamata
- lettura la documentazione. Personalizza l'aspetto della casella di Place Autocomplete in modo che corrisponda lo stile del tuo sito web. Puoi anche definire lo stile del widget di completamento automatico in modo che si adatti all'aspetto del tuo carrello degli acquisti. È disponibile un insieme di classi CSS che puoi personalizzare. Per ulteriori informazioni su come personalizza la casella di completamento automatico
- JavaScript, Android e iOS oltre a chiamare l'API dei servizi web direttamente tramite API Places. Se vuoi creare una UI personalizzata. Per creare una UI personalizzata invece di utilizzare quella progettata da Google, chiama il metodo Posiziona il servizio Autocomplete in modo programmatico per recuperare le previsioni per un determinato input. Puoi recuperare le previsioni di Place Autocomplete in modo programmatico