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, indicazioni stradali e distanze. Gli esempi in questa guida sono scritti per una piattaforma, ma sono disponibili link alla documentazione per l'implementazione su altre piattaforme.
Quick Builder nella console Google Cloud ti consente di creare il completamento automatico dei moduli degli indirizzi utilizzando un'interfaccia utente interattiva che genera codice JavaScript per te.
Gli utenti si sono abituati a vivere e operare in un mondo digitale in cui comodità, velocità e sicurezza sono aspettative di base. Quando richiedono una carta di credito, un conto bancario o un prestito, si aspettano che la procedura sia veloce e semplice.
Maggiore è il numero di utenti che devono digitare o inserire dati duplicati, minori sono le possibilità di conservarli come clienti. La creazione di un'esperienza di registrazione rapida, semplice e verificata migliora l'esperienza utente, consentendoti al contempo di mantenere gli utenti sul tuo sito.
L'inserimento manuale degli indirizzi può causare la riduzione delle conversioni, dati CRM errati e costosi errori di consegna. Grazie alla funzionalità Registrazione rapida e verificata, la procedura di registrazione è più rapida, in quanto suggerisce istantaneamente gli indirizzi nelle vicinanze con pochi tocchi del pollice e viene visualizzato l'indirizzo inserito per una conferma visiva, aiutando l'utente a sentirsi sicuro di aver inserito l'indirizzo corretto. La verifica dell'indirizzo dell'utente tramite la sua posizione attuale contribuisce anche a prevenire le attività fraudolente e rafforza la fiducia degli utenti nei confronti dei tuoi prodotti e servizi. La verifica può anche aumentare la tua sicurezza nell'offrire istantaneamente banche virtuali e carte di credito.
Questo argomento fornisce indicazioni per l'implementazione per creare un'esperienza di registrazione rapida e verificata con Google Maps Platform. Poiché è molto probabile che gli utenti si registreranno sui dispositivi mobili, la maggior parte degli esempi di implementazione in questo argomento è incentrata su Android. (Puoi consultare l'esempio di origine completo qui). Per ottenere gli stessi risultati puoi anche utilizzare gli SDK per iOS.
Il seguente diagramma mostra le API principali coinvolte nella creazione della soluzione (fai clic per ingrandire).
Abilitazione delle API in corso…
Per implementare questi suggerimenti, devi abilitare le API seguenti nella console Google Cloud:
- Maps SDK for Android (o l'API per la piattaforma che preferisci)
- API Places
- API Geocoding
Per ulteriori informazioni sulla configurazione, consulta la guida introduttiva a Google Maps Platform.
Sezioni di best practice
Di seguito sono riportate le pratiche e le personalizzazioni che tratteremo in questo argomento.
- L'icona del segno di spunta è una best practice fondamentale.
- 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'esperienza utente su tutte le piattaforme e migliorare la precisione degli indirizzi riducendo al minimo le sequenze di tasti. | |
| Fornire una conferma visiva dell'indirizzo | Consenti agli utenti di vedere il loro indirizzo su una mappa come conferma visiva che hanno inserito l'indirizzo corretto. | |
| Confrontare l'indirizzo inserito dall'utente con la posizione del dispositivo | Confronta l'indirizzo selezionato o inserito dall'utente con la posizione attuale del suo dispositivo per stabilire che si trova all'indirizzo indicato. Affinché questa operazione funzioni, gli utenti devono essere a casa quando si registrano. | |
| Suggerimenti per migliorare ulteriormente la Registrazione rapida e verificata | Puoi migliorare ulteriormente l'inserimento degli indirizzi con aggiunte come la personalizzazione dell'aspetto del widget di completamento automatico o la possibilità per gli utenti di selezionare il nome di un'attività o di un punto di riferimento come indirizzo. |
Aggiunta del completamento automatico ai campi di immissione
| In questo esempio vengono utilizzati: Places SDK for Android | Disponibile anche: iOS | JavaScript |
Place Autocomplete può semplificare l'inserimento degli indirizzi nella tua applicazione, generando tassi di conversione più elevati e un'esperienza ottimale per i tuoi clienti. Il completamento automatico fornisce un singolo campo di immissione rapida con previsione dell'indirizzo che può essere utilizzato per compilare automaticamente un modulo per l'indirizzo di registrazione. Incorporando Place Autocomplete nel flusso di registrazione, puoi:
- Riduci gli errori di inserimento degli indirizzi.
- Riduci il numero di passaggi della procedura di registrazione.
- Semplifica l'esperienza di inserimento dell'indirizzo su dispositivi mobili o indossabili.
- Riduci in modo significativo il numero di tasti e il tempo totale necessario per la registrazione del cliente.
Quando l'utente seleziona la casella di immissione Completamento automatico e inizia a digitare, viene visualizzato un elenco di previsioni relative agli indirizzi.
Quando l'utente seleziona un indirizzo dall'elenco delle previsioni, puoi utilizzare la risposta per verificare l'indirizzo e ottenere la posizione. L'applicazione potrà quindi completare i campi corretti del modulo di inserimento dell'indirizzo, come mostrato nella figura seguente.
Video: migliorare i moduli degli indirizzi con il completamento automatico dei luoghi
Moduli per gli indirizzi
Android
iOS
Pagine web
Google Maps Platform fornisce un widget Place Autocomplete per le piattaforme mobile e il web. Il widget, mostrato nelle figure precedenti, fornisce una finestra di dialogo di ricerca con funzionalità di completamento automatico integrata che puoi anche ottimizzare per la ricerca con ambito a livello di località.
Questa sezione descrive come implementare il completamento automatico del luogo per la registrazione rapida e verificata.
Aggiunta del widget Place Autocomplete
In Android, puoi aggiungere il widget di completamento automatico utilizzando un intent di completamento automatico che avvia Place Autocomplete dal campo di immissione Riga indirizzo 1, dove l'utente inizierà a inserire il proprio indirizzo. Quando iniziano a digitare, potranno selezionare il proprio indirizzo dall'elenco delle previsioni di completamento automatico.
Per prima cosa, prepara un'Avvio attività, utilizzando ActivityResultLauncher, che ricorderà un risultato dell'attività avviata. Il callback del risultato conterrà un oggetto Place
corrispondente all'indirizzo selezionato dall'utente dalle previsioni di
Completamento automatico.
private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
new ActivityResultContracts.StartActivityForResult(),
result -> {
if (result.getResultCode() == Activity.RESULT_OK) {
Intent intent = result.getData();
if (intent != null) {
Place place = Autocomplete.getPlaceFromIntent(intent);
// Write a method to read the address components from the Place
// and populate the form with the address components
Log.d(TAG, "Place: " + place.getAddressComponents());
fillInAddress(place);
}
} else if (result.getResultCode() == Activity.RESULT_CANCELED) {
// The user canceled the operation.
Log.i(TAG, "User canceled autocomplete");
}
});
Poi, definisci i campi, la posizione e le proprietà del tipo dell'intent Place Autocomplete e creane uno con Autocomplete.IntentBuilder.
Infine, avvia l'intent utilizzando il ActivityResultLauncher definito nell'esempio di codice precedente.
private void startAutocompleteIntent() {
// Set the fields to specify which types of place data to
// return after the user has made a selection.
List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
Place.Field.LAT_LNG, Place.Field.VIEWPORT);
// Build the autocomplete intent with field, country, and type filters applied
Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
.setCountries(Arrays.asList("US"))
.setTypesFilter(new ArrayList<String>() {{
add(TypeFilter.ADDRESS.toString().toLowerCase());
}})
.build(this);
startAutocomplete.launch(intent);
}
Gestione dell'indirizzo restituito da Place Autocomplete
La definizione precedente di ActivityResultLauncher ha anche definito cosa fare
quando il risultato dell'attività viene restituito nel callback. Se l'utente
seleziona una previsione, questa verrà pubblicata nell'intent contenuto
nell'oggetto risultato. Poiché l'intent è stato creato da Autocomplete.IntentBuilder,
il metodo Autocomplete.getPlaceFromIntent() può estrarre l'oggetto Place
da lì.
private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
new ActivityResultContracts.StartActivityForResult(),
result -> {
if (result.getResultCode() == Activity.RESULT_OK) {
Intent intent = result.getData();
if (intent != null) {
Place place = Autocomplete.getPlaceFromIntent(intent);
// Write a method to read the address components from the Place
// and populate the form with the address components
Log.d(TAG, "Place: " + place.getAddressComponents());
fillInAddress(place);
}
} else if (result.getResultCode() == Activity.RESULT_CANCELED) {
// The user canceled the operation.
Log.i(TAG, "User canceled autocomplete");
}
});
Da qui, richiama Place.getAddressComponents() e associa ogni componente dell'indirizzo al campo di immissione corrispondente nel modulo dell'indirizzo, compilando il campo con il valore del luogo selezionato dall'utente.
L'acquisizione dei dati degli indirizzi dalla previsione anziché da un indirizzo inserito manualmente contribuisce a garantire l'accuratezza dell'indirizzo, ne garantisce che l'indirizzo sia noto e possa essere recapitato e riduce le sequenze di tasti da parte dell'utente.
Considerazioni per l'implementazione del completamento automatico del luogo
Place Autocomplete ha una serie di opzioni che gli consentono di essere flessibile nella sua implementazione se vuoi usare più del semplice widget. Puoi utilizzare una combinazione di servizi per ottenere esattamente ciò di cui hai bisogno per abbinare una località nel modo corretto.
Per un modulo ADDRESS, imposta il parametro tipi su
addressper limitare le corrispondenze a indirizzi stradali completi. Scopri di più sui tipi supportati nelle richieste Place Autocomplete.Imposta le limitazioni e i bias appropriati se non devi eseguire ricerche in tutto il mondo. Esistono diversi parametri che possono essere utilizzati per differenziare o limitare qualsiasi corrispondenza solo a regioni specifiche.
Utilizza
RectangularBoundsper impostare i limiti rettangolari da bloccare per un'area, utilizzasetLocationRestriction()per assicurarti che vengano restituiti solo gli indirizzi in quelle aree.Utilizza
setCountries()per limitare le risposte a un gruppo specifico di paesi.
Lascia i campi modificabili nel caso in cui alcuni campi non vengano riconosciuti per la corrispondenza e consenti ai clienti di aggiornare l'indirizzo, se necessario. Poiché la maggior parte degli indirizzi restituiti da Place Autocomplete non contiene numeri di locali secondari, come numeri di appartamenti, appartamenti o unità, puoi spostare lo stato attivo sulla Riga indirizzo 2 per incoraggiare l'utente a inserire queste informazioni, se necessario.
Fornire una conferma visiva dell'indirizzo.
| In questo esempio vengono utilizzati: Maps SDK for Android | Disponibile anche: iOS | JavaScript |
Nell'ambito dell'inserimento dell'indirizzo, fornisci agli utenti una conferma visiva dell'indirizzo su una mappa. In questo modo gli utenti avranno un'ulteriore garanzia che l'indirizzo sia corretto.
La figura seguente mostra una mappa sotto l'indirizzo con un segnaposto in corrispondenza dell'indirizzo inserito.
L'esempio seguente segue la procedura di base per aggiungere una mappa in Android. Per ulteriori dettagli, consulta la documentazione.
- Aggiunta di
SupportMapFragment(in questo caso, aggiunta dinamica di un frammento) - Ottenere un handle al frammento e registrare il callback
- Applicare uno stile e aggiungere un indicatore alla mappa
- Disattivare i controlli della mappa
Aggiunta di SupportMapFragment in corso...
Innanzitutto, aggiungi un frammento SupportMapFragment al file XML di layout.
<fragment
android:name="com.google.android.gms.maps.SupportMapFragment"
android:id="@+id/confirmation_map"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
Quindi, aggiungi il frammento in modo programmatico, se non esiste ancora.
private void showMap(Place place) {
coordinates = place.getLatLng();
// It isn't possible to set a fragment's id programmatically so we set a tag instead and
// search for it using that.
mapFragment = (SupportMapFragment)
getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);
// We only create a fragment if it doesn't already exist.
if (mapFragment == null) {
mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
GoogleMapOptions mapOptions = new GoogleMapOptions();
mapOptions.mapToolbarEnabled(false);
// To programmatically add the map, we first create a SupportMapFragment.
mapFragment = SupportMapFragment.newInstance(mapOptions);
// Then we add it using a FragmentTransaction.
getSupportFragmentManager()
.beginTransaction()
.add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
.commit();
mapFragment.getMapAsync(this);
} else {
updateMap(coordinates);
}
}
Ottenere un handle del frammento e registrare il callback
Per ottenere un handle al frammento, chiama il metodo
FragmentManager.findFragmentByIde passalo l'ID risorsa del frammento nel file di layout. Se hai aggiunto il frammento in modo dinamico, salta questo passaggio perché hai già recuperato l'handle.Chiama il metodo
getMapAsyncper impostare il callback sul frammento.
Ad esempio, se hai aggiunto il frammento in modo statico:
Kotlin
val mapFragment = supportFragmentManager
.findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)
Java
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
Definizione dello stile e aggiunta di un indicatore alla mappa
Quando la mappa è pronta, imposta lo stile, centra la fotocamera e aggiungi un indicatore in corrispondenza delle coordinate dell'indirizzo inserito. Il codice seguente utilizza gli stili definiti in un oggetto JSON oppure, in alternativa, puoi caricare un ID mappa che è stato definito con la Personalizzazione delle mappe basata su cloud.
@Override
public void onMapReady(@NonNull GoogleMap googleMap) {
map = googleMap;
try {
// Customise the styling of the base map using a JSON object defined
// in a string resource.
boolean success = map.setMapStyle(
MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));
if (!success) {
Log.e(TAG, "Style parsing failed.");
}
} catch (Resources.NotFoundException e) {
Log.e(TAG, "Can't find style. Error: ", e);
}
map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
marker = map.addMarker(new MarkerOptions().position(coordinates));
}
(Vedi l'esempio di codice completo)
Disattivazione dei controlli della mappa in corso...
Per semplificare la mappa mostrando la posizione senza ulteriori controlli della mappa (come bussola, barra degli strumenti o altre funzionalità integrate), valuta la possibilità di disattivare i controlli che non ritieni necessari. Su Android, un'altra opzione è l'attivazione della modalità Lite per offrire un'interattività limitata.
Confronto tra l'indirizzo inserito dall'utente e la posizione del dispositivo
Ottenere la documentazione che attesta l'indirizzo, ovvero avere la certezza che l'utente si trovi all'indirizzo inserito, può essere complicato da fattori quali la posizione remota dell'utente, il trasferimento degli utenti a un nuovo indirizzo o le attività digitali (ad esempio le banche digitali) che non hanno una sede fisica visitabile per fornire una prova dell'indirizzo con bollette o altra documentazione. Fornire metodi digitali per verificare gli indirizzi degli utenti ti consente di offrire un'esperienza di registrazione più rapida e fluida.
La sicurezza è fondamentale per ottenere il controllo dell'indirizzo, soprattutto con una procedura di registrazione digitale. Questa sezione fornisce indicazioni ed esempi per verificare se la località di un utente durante la registrazione corrisponde all'indirizzo che ha inserito come proprio.
La procedura per confrontare un indirizzo inserito con la posizione di un dispositivo prevede i seguenti passaggi:
- Conversione dell'indirizzo inserito dall'utente in coordinate geografiche.
- Chiedere all'utente l'autorizzazione per ottenere la posizione del proprio dispositivo.
- Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo. Puoi determinare la distanza massima da conteggiare per una corrispondenza indirizzo-località.
La figura seguente è un esempio di come puoi chiedere agli utenti di confrontare l'indirizzo inserito con la loro posizione corrente.
Conversione dell'indirizzo inserito dall'utente in coordinate geografiche
| In questo esempio vengono utilizzati: Places SDK for Android | Disponibile anche: iOS | JavaScript | API Geocoding |
Dopo che gli utenti hanno accettato la verifica dell'indirizzo (toccando "Verifica di essere lì" nella figura precedente), il primo passaggio per confrontare l'indirizzo con la posizione attuale è convertire l'indirizzo inserito in coordinate geografiche.
Se l'utente ha selezionato il proprio indirizzo con Place Autocomplete, assicurati di richiedere
Place.Field.LAT_LNG nell'elenco dei campi Place Autocomplete come mostrato nello snippet di codice
Aggiunta del widget Place Autocomplete e chiama il metodo
Place.getLatLng()
per ottenere le coordinate geografiche dell'indirizzo selezionato.
coordinates = place.getLatLng();
Se l'utente ha inserito manualmente l'indirizzo o ha apportato modifiche dopo che Place Autocomplete ha compilato i campi, utilizza il servizio Geocoder di Android o l'API Geocoding per cercare le coordinate che corrispondono a quell'indirizzo.
Esempio
https://maps.googleapis.com/maps/api/geocode/json?address=1600%20Amphitheatre%2BParkway%2C%20Mountain%20View%2C%20CA%2094043&key=YOUR_API_KEY
Assicurati di eseguire la codifica URL la chiamata all'API Geocoding.
Riferimento rapido per la codifica dell'URL: %20 = spazio, %2B = + (più), %2C = , (virgola)
Chiedere all'utente l'autorizzazione per ottenere la posizione del dispositivo
Per ottenere la posizione del dispositivo dell'utente, devi richiedere l'autorizzazione dell'utente per attivare i servizi di geolocalizzazione. Utilizzando le indicazioni riportate nella documentazione di Android sulla creazione di app sensibili alla posizione, implementa il seguente flusso:
Richiedi l'autorizzazione di accesso alla posizione, come concessione una tantum, a un livello preciso (
ACCESS_FINE_LOCATION).Se l'utente concede l'accesso alla posizione, recupera la posizione dell'utente.
Se l'utente rifiuta l'accesso alla posizione, gestisci il rifiuto con cautela. Ad esempio, potresti presentare il seguente tipo di messaggio (supponendo che tu non stia memorizzando la posizione corrente dell'utente):
Se non comunichi all'app la tua posizione esatta, dovrai eseguire la verifica tramite posta per attivare il tuo account. [OK]".
La figura seguente mostra un esempio di richiesta di autorizzazione per ottenere la posizione del dispositivo da parte degli utenti.
Per verificare l'autorizzazione di accesso alla posizione, prepara un'Avvio attività che
rileverà un risultato
dell'attività avviata con
ActivityResultLauncher.
Il callback del risultato conterrà una stringa che indica se l'utente ha concesso
o negato l'autorizzazione richiesta.
// Register the permissions callback, which handles the user's response to the
// system permissions dialog. Save the return value, an instance of
// ActivityResultLauncher, as an instance variable.
private final ActivityResultLauncher<String> requestPermissionLauncher =
registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
if (isGranted) {
// Since ACCESS_FINE_LOCATION is the only permission in this sample,
// run the location comparison task once permission is granted.
// Otherwise, check which permission is granted.
getAndCompareLocations();
} else {
// Fallback behavior if user denies permission
Log.d(TAG, "User denied permission");
}
});
Dopodiché, controlla se l'app dispone già dell'autorizzazione ACCESS_FINE_LOCATION.
In caso contrario, chiedi all'utente di avviare l'attività di richiesta di autorizzazione tramite l'Avvio app definita nel passaggio precedente.
private void checkLocationPermissions() {
if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
== PackageManager.PERMISSION_GRANTED) {
getAndCompareLocations();
} else {
requestPermissionLauncher.launch(
ACCESS_FINE_LOCATION);
}
}
Dopo aver concesso l'autorizzazione ACCESS_FINE_LOCATION, utilizza il provider di posizione
fuso per recuperare l'ultima posizione nota
del dispositivo e creare un oggetto LatLng dal dispositivo.
FusedLocationProviderClient fusedLocationClient =
LocationServices.getFusedLocationProviderClient(this);
fusedLocationClient.getLastLocation()
.addOnSuccessListener(this, location -> {
// Got last known location. In some rare situations this can be null.
if (location == null) {
return;
}
deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
// ...
});
}
Calcolo della distanza tra l'indirizzo inserito e la posizione del dispositivo
Utilizza la matematica per calcolare la distanza tra due coordinate di latitudine/longitudine (indirizzo inserito e posizione del dispositivo). La libreria di utilità open source Maps SDK for Android offre alcuni metodi pratici per calcolare la distanza sferica tra due punti sulla Terra.
Innanzitutto, installa la libreria di utilità di Maps SDK for Android aggiungendo la seguente dipendenza al file build.gradle dell'app:
dependencies {
// Utility Library for Maps SDK for Android
// You do not need to add a separate dependency for the Maps SDK for Android
// since this library builds in the compatible version of the Maps SDK.
implementation 'com.google.maps.android:android-maps-utils:3.8.0'
}
Quindi, torna al file delle attività dopo aver ottenuto l'ultima posizione nota del dispositivo, definisci un raggio in metri per considerare le due località come "corrispondete". Il raggio deve essere sufficientemente ampio da tenere conto della variabilità della precisione GPS e delle dimensioni del luogo all'indirizzo inserito dall'utente. Ad esempio:
private static final double acceptableProximity = 150;
Poi, utilizza il metodo delle librerie di utilità computeDistanceBetween()
per calcolare la distanza tra la posizione del dispositivo e la posizione dell'indirizzo
inserito dall'utente. Se la distanza rientra nel raggio definito sopra, considera le località corrispondenti.
// Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
// to use spherical geometry to compute the distance between two Lat/Lng points.
double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
if (distanceInMeters <= acceptedProximity) {
Log.d(TAG, "location matched");
// TODO: Display UI based on the locations matching
} else {
Log.d(TAG, "location not matched");
// TODO: Display UI based on the locations not matching
}
(Vedi l'esempio di codice completo)
Se l'indirizzo e la posizione corrispondono, mostra una conferma nell'app, come mostrato nella figura seguente.
Suggerimenti per migliorare ulteriormente la Registrazione rapida e verificata
Consenti agli utenti di inserire un indirizzo in base al nome di un'attività o di un punto d'interesse. Il servizio di previsione "digita in anticipo" non funziona solo per gli indirizzi,
ma puoi anche consentire agli utenti di inserire i nomi delle attività o dei punti di riferimento.
Per consentire l'inserimento sia di indirizzi che di nomi di strutture, rimuovi
la proprietà types dalla definizione di completamento automatico.
Personalizza l'aspetto della casella Place Autocomplete per adattarla allo stile del tuo sito web. Se preferisci controllare l'aspetto di Place Autocomplete nella tua app anziché utilizzare il widget di Google, puoi utilizzare Place Autocomplete in modo programmatico per potenziare la UI che crei con il servizio Place Autocomplete.