Funzionalità Android avanzate in Kotlin 04.1: Google Maps per Android

Questo codelab fa parte del corso Advanced Android in Kotlin. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire i codelab in sequenza, ma non è obbligatorio. Tutti i codelab del corso sono elencati nella pagina di destinazione dei codelab Advanced Android in Kotlin.

Questo codelab fa parte di una serie che ti guida nell'aggiunta di mappe alle tue app. Ti consigliamo di svolgere tutti i codelab in ordine, perché le attività vengono eseguite passo dopo passo.

I codelab di questa serie sono:

• 4.1 Google Maps per Android
• 4.2 Aggiungere recinti virtuali alle mappe

La creazione di app con Google Maps ti consente di aggiungere funzionalità alla tua app, come immagini satellitari, controlli dell'interfaccia utente robusti per le mappe, monitoraggio della posizione e indicatori di posizione. Puoi aggiungere valore a Google Maps standard mostrando informazioni del tuo set di dati, ad esempio le posizioni di zone di pesca o arrampicata note. Puoi anche creare giochi in cui il giocatore esplora il mondo fisico, come in una caccia al tesoro o anche in giochi in realtà aumentata.

In questa lezione, creerai un'app Google Maps chiamata Wander che mostra mappe personalizzate e la posizione dell'utente.

Prerequisiti

Conoscenza di quanto segue:

• Come creare un'app per Android di base ed eseguirla utilizzando Android Studio.
• Come creare e gestire risorse, ad esempio stringhe.
• Come eseguire il refactoring del codice e rinominare le variabili utilizzando Android Studio.
• Come utilizzare una mappa di Google in qualità di utente.
• Come impostare le autorizzazioni di runtime.

Obiettivi didattici

• Come ottenere una chiave API dalla console API di Google e registrarla nella tua app
• Come integrare una mappa Google nella tua app
• Come visualizzare diversi tipi di mappe
• Come applicare uno stile alla mappa Google
• Come aggiungere indicatori alla mappa
• Come consentire all'utente di posizionare un indicatore su un punto di interesse (PDI)
• Come attivare il monitoraggio della posizione
• Come creare l'app Wander, che ha una mappa Google incorporata
• Come creare funzionalità personalizzate per la tua app, come indicatori e stili
• Come attivare il monitoraggio della posizione nell'app

In questo codelab, crei l'app Wander, che mostra una mappa di Google con uno stile personalizzato. L'app Wander ti consente di inserire indicatori nelle posizioni, aggiungere overlay e vedere la tua posizione in tempo reale.

Maps SDK for Android richiede una chiave API. Per ottenere la chiave API, registra il tuo progetto nella pagina API e servizi. La chiave API è associata a un certificato digitale che collega l'app al suo autore. Per saperne di più sull'utilizzo dei certificati digitali e sulla firma dell'app, vedi Firmare l'app.

In questo codelab, utilizzi la chiave API per il certificato di debug. Il certificato di debug è insicuro per progettazione, come descritto in Firma la build di debug. Le app per Android pubblicate che utilizzano Maps SDK for Android richiedono una seconda chiave API: la chiave per il certificato di rilascio. Per saperne di più su come ottenere un certificato di rilascio, consulta Ottenere una chiave API.

Android Studio include un modello di attività di Google Maps, che genera codice modello utile. Il codice del modello include un file google_maps_api.xml contenente un link che semplifica l'ottenimento di una chiave API.

Nota: se vuoi creare l'attività senza utilizzare il modello, segui i passaggi descritti in Ottieni una chiave API per ottenere la chiave API senza utilizzare il link nel modello.

Passaggio 1: crea il progetto Wander con il modello di mappe

1. Crea un nuovo progetto Android Studio.
2. Seleziona il modello Attività sulle mappe Google Maps.

3. Assegna al progetto il nome Wander.
4. Imposta il livello API minimo su API 19. Assicurati che la lingua sia Kotlin.
5. Fai clic su Fine.
6. Una volta completata la creazione dell'app, dai un'occhiata al progetto e ai seguenti file correlati alle mappe che Android Studio crea per te:

google_maps_api.xml: utilizzi questo file di configurazione per memorizzare la chiave API. Il modello genera due file google_maps_api.xml: uno per il debug e uno per la release. Il file della chiave API per il certificato di debug si trova in src/debug/res/values. Il file della chiave API per il certificato di rilascio si trova in src/release/res/values. In questo codelab utilizzerai solo il certificato di debug.

activity_maps.xml: questo file di layout contiene un singolo frammento che riempie l'intero schermo. La classe SupportMapFragment è una sottoclasse della classe Fragment. Un SupportMapFragment è il modo più semplice per inserire una mappa in un'app. È un wrapper attorno a una visualizzazione di una mappa per gestire automaticamente le esigenze del ciclo di vita necessarie.

Puoi includere SupportMapFragment in un file di layout utilizzando un tag <fragment> in qualsiasi ViewGroup, con un attributo name aggiuntivo.

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java: il file MapsActivity.kt crea un'istanza di SupportMapFragment nel metodo onCreate() e utilizza getMapAsync() della classe per inizializzare automaticamente il sistema di mappe e la visualizzazione. L'attività che contiene SupportMapFragment deve implementare l'interfaccia OnMapReadyCallback e il metodo onMapReady() di questa interfaccia. Il metodo onMapReady() viene chiamato quando la mappa viene caricata.

Nota:se esegui l'app ora, la mappa non viene caricata. Se esamini i log, visualizzi un messaggio che indica che la chiave API non è configurata correttamente. Nel passaggio successivo, otterrai la chiave API per fare in modo che l'app visualizzi la mappa.

Nota: se testi l'app Wander su un emulatore, devi utilizzare un'immagine di sistema che includa Google Play. Seleziona un'immagine che mostri Google Play nella colonna Target dell'elenco dei dispositivi virtuali.

Passaggio 2: ottieni la chiave API

1. Apri la versione di debug del file google_maps_api.xml.
2. Nel file, cerca un commento con un URL lungo. I parametri dell'URL includono informazioni specifiche sulla tua app.
3. Copia e incolla l'URL in un browser.
4. Segui le istruzioni per creare un progetto nella pagina API e servizi. A causa dei parametri nell'URL fornito, la pagina sa di abilitare automaticamente Maps SDK for Android.
5. Fai clic su Crea una chiave API.
6. Nella pagina successiva, vai alla sezione Chiavi API e fai clic sulla chiave che hai appena creato.
7. Fai clic su Limita chiave e seleziona Maps SDK for Android per limitare l'utilizzo della chiave alle app per Android.
8. Copia la chiave API generata. Inizia con "AIza".
9. Nel file google_maps_api.xml, incolla la chiave nella stringa google_maps_key in cui è scritto YOUR_KEY_HERE.
10. Esegui l'app. Dovresti visualizzare una mappa incorporata nella tua attività con un indicatore impostato su Sydney, in Australia. Il marcatore di Sydney fa parte del modello e puoi modificarlo in un secondo momento.

Nota: l'applicazione della chiave API può richiedere fino a 5 minuti. Potrebbe essere necessario anche riavviare Android Studio.

Passaggio 3: rinomina mMap

MapsActivity ha un lateinit var privato denominato mMap, di tipo GoogleMap. Per rispettare le convenzioni di denominazione di Kotlin, modifica il nome di mMap in map.

1. In MapsActivity, fai clic con il tasto destro del mouse su mMap e poi su Refactor > Rename…

2. Modifica il nome della variabile in map.

Nota come tutti i riferimenti a mMap nella funzione onMapReady() cambiano anche in map.

Google Maps include diversi tipi di mappe: normale, ibrida, satellitare, rilievo e "nessuna" (per non visualizzare alcuna mappa).

Mappa normale	Mappa satellitare	Mappa ibrida	Mappa del terreno

Ogni tipo di mappa fornisce diversi tipi di informazioni. Ad esempio, quando utilizzi le mappe per la navigazione in auto, è utile vedere i nomi delle vie, quindi puoi utilizzare l'opzione normale. Quando fai un'escursione, la mappa del terreno può aiutarti a decidere quanto ti manca per raggiungere la cima.

In questa attività:

1. Aggiungi una barra delle app con un menu delle opzioni che consente all'utente di modificare il tipo di mappa.
2. Sposta la posizione iniziale della mappa nella posizione della tua casa.
3. Aggiungi il supporto per i marcatori, che indicano singoli luoghi su una mappa e possono includere un'etichetta.

Aggiungere il menu per i tipi di mappa

In questo passaggio, aggiungi una barra delle app con un menu delle opzioni che consente all'utente di modificare il tipo di mappa.

1. Per creare un nuovo file XML del menu, fai clic con il tasto destro del mouse sulla directory res e seleziona Nuovo > File di risorse Android.
2. Nella finestra di dialogo, assegna al file il nome map_options.
3. Scegli Menu per il tipo di risorsa.
4. Fai clic su OK.
5. Nella scheda Codice, sostituisci il codice nel nuovo file con il seguente codice per creare le opzioni del menu della mappa. Il tipo di mappa "nessuno" viene omesso perché non viene visualizzata alcuna mappa. Questo passaggio causa un errore, che risolverai nel passaggio successivo.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>

6. In strings.xml, aggiungi risorse per gli attributi title per risolvere gli errori.

<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>

7. In MapsActivity, esegui l'override del metodo onCreateOptionsMenu() e gonfia il menu dal file di risorse map_options.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}

8. In MapsActivity.kt, esegui l'override del metodo onOptionsItemSelected(). Modifica il tipo di mappa utilizzando le costanti map-type per riflettere la selezione dell'utente.

override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}

9. Esegui l'app.
10. Fai clic su per modificare il tipo di mappa. Nota come cambia l'aspetto della mappa nelle diverse modalità.

Per impostazione predefinita, il callback onMapReady() include il codice che inserisce un indicatore a Sydney, in Australia, dove è stata creata Google Maps. Il callback predefinito anima anche la mappa in modo da spostarsi su Sydney.

In questa attività, la videocamera della mappa si sposta sulla tua casa, esegue lo zoom fino a un livello specificato e posiziona un indicatore.

Passaggio 1: ingrandisci la tua casa e aggiungi un indicatore

1. Nel file MapsActivity.kt, trova il metodo onMapReady(). Rimuovi il codice che posiziona il marcatore a Sydney e sposta la videocamera. Ecco come dovrebbe apparire ora il tuo metodo.

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}

2. Trova la latitudine e la longitudine della tua casa seguendo queste istruzioni.
3. Crea un valore per la latitudine e un valore per la longitudine e inserisci i relativi valori float.

val latitude = 37.422160
val longitude = -122.084270

4. Crea un nuovo oggetto LatLng denominato homeLatLng. Nell'oggetto homeLatLng, inserisci i valori che hai appena creato.

val homeLatLng = LatLng(latitude, longitude)

3. Crea un val per impostare il livello di zoom che vuoi applicare alla mappa. Utilizza il livello di zoom 15f.

val zoomLevel = 15f

Il livello di zoom controlla il grado di ingrandimento della mappa. L'elenco seguente ti dà un'idea del livello di dettaglio mostrato da ogni livello di zoom:

• 1: Mondo
• 5: massa continentale/continente
• 10: Città
• 15: Strade
• 20: Edifici

4. Sposta la videocamera su homeLatLng chiamando la funzione moveCamera() sull'oggetto map e passando un oggetto CameraUpdate utilizzando CameraUpdateFactory.newLatLngZoom(). Inserisci l'oggetto homeLatLng e zoomLevel.

map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))

6. Aggiungi un indicatore alla mappa in corrispondenza di homeLatLng.

map.addMarker(MarkerOptions().position(homeLatLng))

Il metodo finale dovrebbe essere simile al seguente:

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}

7. Esegui l'app. La mappa dovrebbe spostarsi sulla tua casa, ingrandirsi al livello desiderato e posizionare un indicatore sulla tua casa.

Passaggio 2: consenti agli utenti di aggiungere un indicatore con un clic lungo

In questo passaggio, aggiungi un indicatore quando l'utente tocca e tiene premuto un luogo sulla mappa.

1. Crea uno stub del metodo in MapsActivity chiamato setMapLongClick() che accetta un GoogleMap come argomento.
2. Collega un listener setOnMapLongClickListener all'oggetto mappa.

private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}

3. In setOnMapLongClickListener(), chiama il metodo addMarker(). Passa un nuovo oggetto MarkerOptions con la posizione impostata su LatLng.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

4. Al termine del metodo onMapReady(), chiama setMapLongClick() con map.

override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}

5. Esegui l'app.
6. Tocca e tieni premuto sulla mappa per posizionare un indicatore in una posizione.
7. Tocca il marcatore, che viene centrato sullo schermo.

Nota:quando viene toccato un indicatore, vengono visualizzati i pulsanti di navigazione, che consentono all'utente di utilizzare l'app Google Maps per raggiungere la posizione contrassegnata.

Passaggio 3: aggiungi una finestra informativa per il marcatore

In questo passaggio, aggiungi un InfoWindow che mostra le coordinate del marcatore quando viene toccato.

1. In setMapLongClick()setOnMapLongClickListener(), crea un val per snippet. Uno snippet è un testo aggiuntivo visualizzato dopo il titolo. Lo snippet mostra la latitudine e la longitudine di un indicatore.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

2. In addMarker(), imposta title del marcatore su Segnaposto utilizzando una risorsa stringa R.string.dropped_pin.
3. Imposta snippet del marcatore su snippet.

La funzione completata ha il seguente aspetto:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}

4. Esegui l'app.
5. Tocca e tieni premuta la mappa per inserire un indicatore di posizione.
6. Tocca il marcatore per visualizzare la finestra delle informazioni.

Passaggio 4: aggiungi il listener PDI

Per impostazione predefinita, i punti di interesse (PDI) vengono visualizzati sulla mappa insieme alle icone corrispondenti. I PDI includono parchi, scuole, edifici governativi e altro ancora. Quando il tipo di mappa è impostato su normal, sulla mappa vengono visualizzati anche i PDI delle attività. I PDI delle attività rappresentano attività come negozi, ristoranti e hotel.

In questo passaggio, aggiungi un GoogleMap.OnPoiClickListener alla mappa. Questo listener di clic posiziona un indicatore sulla mappa immediatamente quando l'utente fa clic su un PDI. Il listener di clic mostra anche una finestra informativa che contiene il nome del punto d'interesse.

1. Crea uno stub del metodo in MapsActivity chiamato setPoiClick() che accetta un GoogleMap come argomento.
2. Nel metodo setPoiClick(), imposta un OnPoiClickListener sul GoogleMap passato.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}

3. In setOnPoiClickListener(), crea un val poiMarker per il marcatore .
4. Impostalo su un indicatore utilizzando map.addMarker() con MarkerOptions impostando title sul nome del PDI.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}

5. Nella funzione setOnPoiClickListener(), chiama showInfoWindow() su poiMarker per visualizzare immediatamente la finestra delle informazioni.

poiMarker.showInfoWindow()

Il codice finale per la funzione setPoiClick() dovrebbe avere il seguente aspetto.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}

6. Al termine di onMapReady(), chiama setPoiClick() e passa a map.

override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}

7. Esegui l'app e trova un PDI, ad esempio un parco o un bar.
8. Tocca il PDI per posizionare un indicatore e visualizzare il nome del PDI in una finestra informativa.

Puoi personalizzare Google Maps in molti modi, conferendo alla tua mappa un aspetto unico.

Puoi personalizzare un oggetto MapFragment utilizzando gli attributi XML disponibili, come faresti con qualsiasi altro frammento. Tuttavia, in questo passaggio personalizzi l'aspetto dei contenuti di MapFragment utilizzando i metodi dell'oggetto GoogleMap.

Per creare uno stile personalizzato per la mappa, genera un file JSON che specifica come vengono visualizzate le funzionalità nella mappa. Non devi creare manualmente questo file JSON. Google fornisce la procedura guidata degli stili di Maps Platform, che genera il codice JSON dopo che hai applicato visivamente lo stile alla mappa. In questa attività, applichi uno stile alla mappa con un tema retrò, il che significa che la mappa utilizza colori vintage e aggiungi strade colorate.

Nota:lo stile si applica solo alle mappe che utilizzano il tipo di mappa normal.

Passaggio 1: crea uno stile per la mappa

1. Vai all'indirizzo https://mapstyle.withgoogle.com/ nel browser.
2. Seleziona Crea uno stile.
3. Seleziona Retro.

4. Fai clic su Altre opzioni.

5. Nell'elenco Tipo di funzionalità, seleziona Strada > Riempi.
6. Cambia il colore delle strade con quello che preferisci (ad esempio il rosa).

7. Fai clic su Fine.

8. Copia il codice JSON dalla finestra di dialogo risultante e, se vuoi, memorizzalo in una nota di testo normale per utilizzarlo nel passaggio successivo.

Passaggio 2: aggiungi lo stile alla mappa

1. In Android Studio, nella directory res , crea una directory delle risorse e chiamala raw. Utilizzi le risorse della directory raw come il codice JSON.
2. Crea un file denominato map_style.json in res/raw.
3. Incolla il codice JSON memorizzato nel nuovo file di risorse.
4. In MapsActivity, crea una variabile di classe TAG sopra il metodo onCreate(). Questi dati vengono utilizzati a fini di logging.

private val TAG = MapsActivity::class.java.simpleName

5. Sempre in MapsActivity, crea una funzione setMapStyle() che accetta un GoogleMap.
6. In setMapStyle(), aggiungi un blocco try{}.
7. Nel blocco try{}, crea un val success per la riuscita dell'applicazione dello stile. (Aggiungi il seguente blocco catch.)
8. Nel blocco try{}, imposta lo stile JSON sulla mappa, chiama setMapStyle() sull'oggetto GoogleMap. Passa un oggetto MapStyleOptions, che carica il file JSON.
9. Assegna il risultato a success. Il metodo setMapStyle() restituisce un valore booleano che indica lo stato di riuscita dell'analisi del file di stile e dell'impostazione dello stile.

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}

10. Aggiungi un'istruzione if per success che è false. Se lo stile non viene applicato, stampa un log che indica che l'analisi non è riuscita.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}

11. Aggiungi un blocco catch{} per gestire la situazione di un file di stile mancante. Nel blocco catch, se il file non può essere caricato, genera un Resources.NotFoundException.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

Il metodo completato dovrebbe essere simile al seguente snippet di codice:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

12. Infine, chiama il metodo setMapStyle() nel metodo onMapReady() passando l'oggetto GoogleMap.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}

13. Esegui l'app.
14. Imposta la mappa sulla modalità normal e il nuovo stile dovrebbe essere visibile con il tema retrò e le strade del colore che hai scelto.

Nota:se riduci sufficientemente lo zoom, la mappa non mostra più le strade, quindi non le vedi.

Passaggio 3: personalizza il marcatore

Puoi personalizzare ulteriormente la mappa modificando lo stile dei relativi indicatori. In questo passaggio, devi modificare gli indicatori rossi predefiniti con qualcosa di più accattivante.

1. Nel metodo onMapLongClick(), aggiungi la seguente riga di codice a MarkerOptions() del costruttore per utilizzare il marcatore predefinito, ma cambia il colore in blu.

.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

Ora onMapLongClickListener() ha il seguente aspetto:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}

2. Esegui l'app. I marcatori visualizzati dopo il clic lungo ora sono ombreggiati in blu. Tieni presente che i marcatori dei PDI sono ancora rossi perché non hai aggiunto stili al metodo onPoiClick().

Un modo per personalizzare la mappa di Google è disegnare sopra. Questa tecnica è utile se vuoi mettere in evidenza un particolare tipo di località, ad esempio i luoghi di pesca più frequentati.

• Forme:puoi aggiungere polilinee, poligoni e cerchi alla mappa.
• GroundOverlay oggetti: un overlay del suolo è un'immagine fissa su una mappa. A differenza dei marcatori, gli overlay del suolo sono orientati verso la superficie terrestre anziché verso lo schermo. La rotazione, l'inclinazione o lo zoom della mappa modificano l'orientamento dell'immagine. Gli overlay a terra sono utili quando vuoi fissare una singola immagine in un'area della mappa.

Passaggio: aggiungi una sovrapposizione al suolo

In questa attività, aggiungi una sovrapposizione al suolo a forma di Android alla tua posizione della casa.

1. Scarica questa immagine Android e salvala nella cartella res/drawable. (Assicurati che il nome del file sia android.png.)

2. In onMapReady(), dopo la chiamata per spostare la videocamera nella posizione della tua casa, crea un oggetto GroundOverlayOptions.
3. Assegna l'oggetto a una variabile denominata androidOverlay.

val androidOverlay = GroundOverlayOptions()

4. Utilizza il metodo BitmapDescriptorFactory.fromResource() per creare un oggetto BitmapDescriptor dalla risorsa immagine scaricata.
5. Passa l'oggetto BitmapDescriptor risultante al metodo image() dell'oggetto GroundOverlayOptions.

val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))

6. Crea un float overlaySize per la larghezza in metri della sovrapposizione desiderata. Per questo esempio, una larghezza di 100f funziona bene.

Imposta la proprietà position per l'oggetto GroundOverlayOptions chiamando il metodo position() e passa l'oggetto homeLatLng e overlaySize.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)

7. Chiama addGroundOverlay() sull'oggetto GoogleMap e passa l'oggetto GroundOverlayOptions.

map.addGroundOverlay(androidOverlay)

8. Esegui l'app.
9. Modifica il valore di zoomLevel in 18f per visualizzare l'immagine Android come overlay.

Gli utenti spesso utilizzano Google Maps per vedere la loro posizione attuale. Per visualizzare la posizione del dispositivo sulla mappa, puoi utilizzare il livello dei dati sulla posizione.

Il livello di dati sulla posizione aggiunge La mia posizione alla mappa. Quando l'utente tocca il pulsante, la mappa si centra sulla posizione del dispositivo. La posizione viene visualizzata come un punto blu se il dispositivo è fermo e come un chevron blu se il dispositivo è in movimento.

In questa attività, attiverai il livello dei dati sulla posizione.

Passaggio: richiedi le autorizzazioni di accesso alla posizione

L'attivazione del monitoraggio della posizione in Google Maps richiede una sola riga di codice. Tuttavia, devi assicurarti che l'utente abbia concesso le autorizzazioni di localizzazione (utilizzando il modello di autorizzazione di runtime).

In questo passaggio, richiedi le autorizzazioni di accesso alla posizione e attiva il monitoraggio della posizione.

1. Nel file AndroidManifest.xml, verifica che l'autorizzazione FINE_LOCATION sia già presente. Android Studio ha inserito questa autorizzazione quando hai selezionato il modello di Google Maps.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

2. In MapsActivity, crea una variabile di classe REQUEST_LOCATION_PERMISSION.

private val REQUEST_LOCATION_PERMISSION = 1

3. Per verificare se le autorizzazioni sono concesse, crea un metodo in MapsActivity chiamato isPermissionGranted(). In questo metodo, controlla se l'utente ha concesso l'autorizzazione.

private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}

4. Per attivare il monitoraggio della posizione nella tua app, crea un metodo in MapsActivity chiamato enableMyLocation() che non accetta argomenti e non restituisce nulla. All'interno, controlla l'autorizzazione ACCESS_FINE_LOCATION. Se l'autorizzazione è concessa, attiva il livello della posizione. In caso contrario, richiedi l'autorizzazione.

private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}

4. Chiama enableMyLocation() dal callback onMapReady() per attivare il livello della posizione.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}

5. Esegui l'override del metodo onRequestPermissionsResult(). Se l'autorizzazione requestCode è uguale a REQUEST_LOCATION_PERMISSION e se l'array grantResults non è vuoto e contiene PackageManager.PERMISSION_GRANTED nel primo slot, chiama enableMyLocation().

override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}

6. Esegui l'app. Dovrebbe essere visualizzata una finestra di dialogo che richiede l'accesso alla posizione del dispositivo. Procedi e consenti l'autorizzazione.

Nota: questa finestra di dialogo potrebbe avere un aspetto diverso se non utilizzi il livello API 29.

La mappa ora mostra la posizione attuale del dispositivo con un punto blu. Nota che è presente un pulsante di posizione. Se allontani la mappa dalla tua posizione e fai clic su questo pulsante, la mappa viene centrata di nuovo sulla posizione del dispositivo.

Nota: quando esegui l'app su un emulatore, la posizione potrebbe non essere disponibile. Se non hai utilizzato le impostazioni dell'emulatore per impostare una posizione, il pulsante della posizione non sarà disponibile.

Scarica il codice per il codelab completato.

$  git clone https://github.com/googlecodelabs/android-kotlin-geo-maps

In alternativa, puoi scaricare il repository come file zip, decomprimerlo e aprirlo in Android Studio.

Scarica zip

Nota: devi aggiungere una chiave API al codice della soluzione, altrimenti non viene visualizzata alcuna mappa.

• Per utilizzare l'API Maps, devi disporre di una chiave API della console API di Google.
• In Android Studio, l'utilizzo del modello di attività Google Maps genera un Activity con un singolo SupportMapFragment nel layout dell'app. Il modello aggiunge anche ACCESS_FINE_PERMISSION al manifest dell'app, implementa OnMapReadyCallback nell'attività e sostituisce il metodo onMapReady() obbligatorio.

Per modificare il tipo di mappa di un GoogleMap in fase di runtime, utilizza il metodo GoogleMap.setMapType(). Una mappa di Google può essere uno dei seguenti tipi di mappa:

• Normale: la tipica mappa stradale. Mostra strade, alcune caratteristiche costruite dall'uomo e importanti elementi naturali come i fiumi. Sono visibili anche le etichette di strade e caratteristiche.
• Ibrido: dati di fotografie satellitari con l'aggiunta di mappe stradali. Sono visibili anche le etichette di strade e caratteristiche.
• Satellite: dati fotografici. Le etichette di strade e funzionalità non sono visibili.
• Rilievo: dati topografici. La mappa include colori, curve di livello ed etichette, nonché ombreggiatura prospettica. Sono visibili anche alcune strade ed etichette.
• Nessuno: nessuna tessera della mappa di base.

Informazioni su Google Maps:

• Un indicatore è un indicatore per una posizione geografica specifica.
• Quando viene toccato, il comportamento predefinito del marcatore è visualizzare una finestra informativa con informazioni sulla posizione.
• Per impostazione predefinita, i punti di interesse (PDI) vengono visualizzati sulla mappa di base insieme alle icone corrispondenti. I PDI includono parchi, scuole, edifici governativi e altro ancora.
• Inoltre, i PDI commerciali (negozi, ristoranti, hotel e altro ancora) vengono visualizzati per impostazione predefinita sulla mappa quando il tipo di mappa è normal.
• Puoi acquisire i clic sui PDI utilizzando OnPoiClickListener.
• Puoi modificare l'aspetto visivo di quasi tutti gli elementi di una mappa Google utilizzando la procedura guidata di stile. La procedura guidata degli stili genera un file JSON che viene passato a Google Maps utilizzando il metodo setMapStyle().
• Puoi personalizzare i tuoi indicatori modificando il colore predefinito o sostituendo l'icona predefinita dell'indicatore con un'immagine personalizzata.

Altre informazioni importanti

• Utilizza un overlay di terra per fissare un'immagine a una posizione geografica.
• Utilizza un oggetto GroundOverlayOptions per specificare l'immagine, le dimensioni dell'immagine in metri e la posizione dell'immagine. Passa questo oggetto al metodo GoogleMap.addGroundOverlay() per impostare l'overlay sulla mappa.
• A condizione che la tua app disponga dell'autorizzazione ACCESS_FINE_LOCATION, puoi attivare il monitoraggio della posizione impostando map.isMyLocationEnabled = true.
• Non è trattato in questo codelab, ma puoi fornire ulteriori informazioni su una località utilizzando Google Street View, che è una foto panoramica navigabile di una determinata località.

Documentazione per sviluppatori Android:

• Inizia
• Aggiungere una mappa con un indicatore
• Oggetti mappa
• Aggiungere una mappa con stili
• Street View
• Overlay del suolo

Documentazione di riferimento:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

Per i link ad altri codelab di questo corso, consulta la pagina di destinazione dei codelab Advanced Android in Kotlin.