Versione avanzata di Android 09.1: Google Maps

1. Ti diamo il benvenuto

Questo codelab fa parte del corso di formazione Advanced Android Development, sviluppato dal team Google Developers Training. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza.

Per informazioni dettagliate sul corso, consulta la panoramica di Advanced Android Development.

Introduzione

La creazione di app con Google Maps ti consente di aggiungere funzionalità alla tua app, come immagini satellitari, controlli dell'interfaccia utente robusti, 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 legati al mondo reale, come Pokémon Go.

In questo esercizio pratico, creerai un'app Google Maps chiamata Wander.

Cosa devi già sapere

Devi avere familiarità con:

  • Funzionalità di base di Google Maps.
  • Autorizzazioni di runtime.
  • Creazione, compilazione ed esecuzione di app in Android Studio.
  • Includere librerie esterne nel file build.gradle.

Obiettivi didattici

  • Integra una mappa di Google nella tua app.
  • Visualizzare diversi tipi di mappe.
  • Applica uno stile alla mappa Google.
  • Aggiungi indicatori alla mappa.
  • Consente all'utente di posizionare un indicatore su un punto d'interesse.
  • Attiva il monitoraggio della posizione.
  • Attiva Google Street View.

In questo lab proverai a:

  • Ottieni una chiave API dalla console API di Google e registrala nella tua app.
  • Crea l'app Wander, che ha una mappa Google incorporata.
  • Aggiungi funzionalità personalizzate alla tua app, come indicatori, stili e monitoraggio della posizione.
  • Attiva il monitoraggio della posizione e Street View nella tua app.

2. Panoramica app

In questo esercizio pratico creerai l'app Wander, che è una mappa di Google con uno stile. L'app Wander ti consente di inserire indicatori nelle posizioni, vedere la tua posizione in tempo reale e visualizzare i panorami di Street View.

Una mappa Google con stili

Google Street View in un'app per Android

3. Attività 1: Configura il progetto e ottieni una chiave API

L'API Google Maps, come l'API Places, richiede una chiave API. Per ottenere la chiave API, registra il tuo progetto nella console API di Google. 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 esercizio pratico, 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 l'API Google Maps richiedono una seconda chiave API: la chiave per il certificato di release. Per saperne di più su come ottenere un certificato di rilascio, consulta Ottieni la 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.

1.1 Crea il progetto Wander con il modello Maps

  1. Crea un nuovo progetto Android Studio.
  2. Assegna all'app il nome "Wander". Accetta i valori predefiniti fino a raggiungere la pagina Aggiungi un'attività.
  3. Seleziona il modello Attività sulle mappe Google Maps.
  4. Lascia i valori predefiniti per Nome attività e Nome layout.
  5. Modifica il Titolo in "Passeggiata" e fai clic su Fine.

Android Studio crea diversi file aggiuntivi correlati alle mappe:

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 esercizio pratico utilizziamo 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. Puoi includere SupportMapFragment in un file di layout utilizzando un tag <fragment> in qualsiasi ViewGroup, con un attributo aggiuntivo:

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

MapsActivity.java

Il file MapsActivity.java crea un'istanza della classe SupportMapFragment e utilizza il metodo getMapAsync() della classe per preparare Google Maps. L'attività che contiene SupportMapFragment deve implementare l'interfaccia OnMapReadyCallback e il metodo onMapReady() di questa interfaccia. Il metodo getMapAsync() restituisce un oggetto GoogleMap, a indicare che la mappa è caricata.

1.2 Ottieni la chiave API

  1. Apri la versione di debug del file google_maps_api.xml.

Il file include un commento con un URL lungo. I parametri dell'URL includono informazioni specifiche sulla tua app.

  1. Copia e incolla l'URL in un browser.
  2. Segui le istruzioni per creare un progetto nella console API di Google. A causa dei parametri nell'URL fornito, la console API sa di abilitare automaticamente l'API Google Maps per Android
  3. Crea una chiave API e fai clic su Limita chiave per limitarne l'utilizzo alle app per Android. La chiave API generata deve iniziare con AIza.
  4. Nel file google_maps_api.xml, incolla la chiave nella stringa google_maps_key in cui è scritto YOUR_KEY_HERE.
  5. Esegui l'app. Nella tua attività è incorporata una mappa con un indicatore impostato su Sydney, in Australia. Il marcatore di Sydney fa parte del modello e lo modificherai in un secondo momento.

4. Attività 2: Aggiungere tipi di mappe e indicatori

Google Maps include diversi tipi di mappe: normale, ibrida, satellite, rilievo e "nessuno". In questa attività aggiungi una barra delle app con un menu delle opzioni che consente all'utente di modificare il tipo di mappa. Sposta la posizione iniziale della mappa nella posizione della tua casa. Poi aggiungi il supporto per i marcatori, che indicano singole posizioni su una mappa e possono includere un'etichetta.

2.1 Aggiungere tipi di mappe

Il tipo di mappa che l'utente vuole dipende dal tipo di informazioni di cui ha bisogno. Quando utilizzi le mappe per la navigazione in auto, è utile visualizzare chiaramente i nomi delle vie. Quando fai un'escursione, probabilmente ti interessa di più sapere quanto devi salire per raggiungere la cima della montagna. 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. Scegli Menu per il tipo di risorsa. Fai clic su Ok.
  3. Sostituisci il codice nel nuovo file con il seguente codice per creare le opzioni della mappa. Il tipo di mappa "nessuno" viene omesso perché non viene visualizzata alcuna mappa.
<?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>
  1. Crea risorse stringa per gli attributi title.
  2. Nel file MapsActivity, modifica la classe in modo da estendere la classe AppCompatActivity anziché la classe FragmentActivity. L'utilizzo di AppCompatActivity mostrerà la barra delle app e quindi il menu.
  3. In MapsActivity, esegui l'override del metodo onCreateOptionsMenu() e gonfia il file map_options:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}
  1. Per modificare il tipo di mappa, utilizza il metodo setMapType() sull'oggetto GoogleMap, passando una delle costanti del tipo di mappa.

Esegui l'override del metodo onOptionsItemSelected(). Incolla il seguente codice per modificare il tipo di mappa quando l'utente seleziona una delle opzioni del menu:

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }
  1. Esegui l'app. Utilizza il menu nella barra delle app per modificare il tipo di mappa. Nota come cambia l'aspetto della mappa.

2.2 Sposta la posizione predefinita della mappa

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 questo passaggio, la mappa si sposta sulla posizione della tua casa senza posizionare un indicatore, quindi esegue lo zoom al livello che specifichi.

  1. Nel metodo onMapReady(), rimuovi il codice che posiziona il marcatore a Sydney e sposta la videocamera.
  2. Vai su www.google.com/maps nel browser e trova la tua casa.
  3. Fai clic con il tasto destro del mouse sulla posizione e seleziona Che cosa c'è qui?

Nella parte inferiore dello schermo viene visualizzata una piccola finestra con le informazioni sulla posizione, tra cui latitudine e longitudine.

  1. Crea un nuovo oggetto LatLng denominato home. Nell'oggetto LatLng, utilizza le coordinate trovate su Google Maps nel browser.
  2. Crea una variabile float denominata zoom e impostala sul livello di zoom iniziale che preferisci. 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
  1. Crea un oggetto CameraUpdate utilizzando CameraUpdateFactory.newLatLngZoom(), passando l'oggetto LatLng e la variabile zoom. Esegui la panoramica e lo zoom della videocamera chiamando moveCamera() sull'oggetto GoogleMap, passando il nuovo oggetto CameraUpdate:
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));
  1. Esegui l'app. La mappa dovrebbe spostarsi sulla tua casa e ingrandirsi al livello desiderato.

2.3 Aggiungere indicatori

Google Maps può selezionare una posizione utilizzando un indicatore, che crei utilizzando la classe Marker. Il marcatore predefinito utilizza l'icona standard di Google Maps: Indicatore di Google Maps

Puoi estendere i segnaposto per mostrare informazioni contestuali nelle finestre informative.

In questo passaggio, aggiungi un indicatore quando l'utente tocca e tiene premuto un luogo sulla mappa. Aggiungi poi un InfoWindow che mostra le coordinate del marcatore quando viene toccato.

Una finestra informativa per un segnaposto

  1. Crea uno stub del metodo in MapsActivity denominato setMapLongClick() che accetta un final GoogleMap come argomento e restituisce void:
private void setMapLongClick(final GoogleMap map) {}
  1. Utilizza il metodo setOnMapLongClickListener() dell'oggetto GoogleMap per posizionare un indicatore nel punto in cui l'utente tocca e tiene premuto. Passa una nuova istanza di OnMapLongClickListener che esegue l'override del metodo onMapLongClick(). L'argomento in entrata è un oggetto LatLng che contiene le coordinate della posizione in cui l'utente ha premuto:
private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}
  1. All'interno di onMapLongClick(), chiama il metodo addMarker(). Passa un nuovo oggetto MarkerOptions con la posizione impostata su LatLng:
map.addMarker(new MarkerOptions().position(latLng));
  1. Chiama setMapLongClick() alla fine del metodo onMapReady(). Tessera in mMap.
  2. Esegui l'app. Tocca e tieni premuto sulla mappa per posizionare un indicatore in una posizione.
  3. Tocca il marcatore, che viene centrato sullo schermo.

I pulsanti di navigazione vengono visualizzati in basso a sinistra dello schermo e consentono all'utente di utilizzare l'app Google Maps per raggiungere la posizione contrassegnata.

Per aggiungere una finestra informativa per il marcatore:

  1. Nell'oggetto MarkerOptions, imposta il campo title e il campo snippet.
  2. In onMapLongClick(), imposta il campo title su "Segnaposto". Imposta il campo snippet sulle coordinate della posizione all'interno del metodo addMarker().
map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});
  1. Esegui l'app. Tocca e tieni premuto sulla mappa per inserire un indicatore di posizione. Tocca il segnaposto per visualizzare la finestra delle informazioni.

2.4 Aggiungere un 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 immediatamente un indicatore sulla mappa, anziché attendere un tocco e tieni premuto. Il listener di clic mostra anche la finestra informativa contenente il nome del punto d'interesse.

Indicatore del punto d&#39;interesse

  1. Crea uno stub del metodo in MapsActivity denominato setPoiClick() che accetta un final GoogleMap come argomento e restituisce void:
private void setPoiClick(final GoogleMap map) {}
  1. Nel metodo setPoiClick(), imposta un OnPoiClickListener sul GoogleMap passato:
map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});
  1. Nel metodo onPoiClick(), posiziona un indicatore nella posizione del PDI. Imposta il titolo sul nome del punto d'interesse. Salva il risultato in una variabile denominata poiMarker.
public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}
  1. Chiama showInfoWindow() su poiMarker per mostrare immediatamente la finestra delle informazioni.
poiMarker.showInfoWindow();
  1. Chiama setPoiClick() al termine di onMapReady(). Tessera in mMap.
  2. Esegui l'app e trova un punto d'interesse, ad esempio un parco. Tocca il PDI per posizionare un indicatore e visualizzare il nome del PDI in una finestra informativa.

5. Attività 3: Definizione dello stile della mappa

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. Utilizzi la procedura guidata di stile online per aggiungere uno stile alla mappa e personalizzare i marcatori. Puoi anche aggiungere un GroundOverlay alla posizione di casa che viene scalato e ruotato con la mappa.

3.1 Aggiungere uno stile alla mappa

Per creare uno stile personalizzato per la mappa, genera un file JSON che specifica come vengono visualizzate le funzionalità nella mappa.Non devi creare questo file JSON manualmente: Google fornisce la procedura guidata degli stili, che genera il file JSON dopo che hai applicato uno stile visivo alla mappa. In questo esercizio pratico, applichi uno stile alla mappa per la "modalità notturna", il che significa che la mappa utilizza colori tenui e un contrasto basso per l'uso di notte.

  1. Vai all'indirizzo https://mapstyle.withgoogle.com/ nel browser.
  2. Seleziona Crea uno stile.
  3. Seleziona il tema Notte.
  4. Fai clic su Altre opzioni in fondo al menu.
  5. Nella parte inferiore dell'elenco Tipo di funzionalità, seleziona Acqua > Riempi. Cambia il colore dell'acqua in un blu scuro (ad esempio, #160064).
  6. Fai clic su Fine. Copia il codice JSON dalla finestra popup risultante.
  7. In Android Studio, crea una directory di risorse denominata raw nella directory res. Crea un file denominato map_style.json in res/raw.
  8. Incolla il codice JSON nel nuovo file di risorse.
  9. Per impostare lo stile JSON sulla mappa, chiama setMapStyle() sull'oggetto GoogleMap. Passa un oggetto MapStyleOptions, che carica il file JSON. Il metodo setMapStyle() restituisce un valore booleano che indica l'esito positivo dello stile. Se il file non può essere caricato, il metodo genera un Resources.NotFoundException.

Copia il seguente codice nel metodo onMapReady() per applicare lo stile alla mappa. Potrebbe essere necessario creare una stringa TAG per le istruzioni di log:

     try {
        // Customize the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = googleMap.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
                   this, R.raw.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }
  1. Esegui l'app. Il nuovo stile dovrebbe essere visibile quando la mappa è in modalità normal.

Google Maps nello stile della modalità notturna

3.2 Personalizzare l'indicatore

Puoi personalizzare ulteriormente la mappa modificando lo stile dei relativi indicatori. In questo passaggio, modifichi i marcatori rossi predefiniti in modo che corrispondano alla combinazione di colori della modalità notturna.

  1. Nel metodo onMapLongClick(), aggiungi la seguente riga di codice al costruttore MarkerOptions() per utilizzare il marcatore predefinito, ma cambia il colore in blu:
.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))
  1. Esegui l'app. I marcatori che posizioni ora sono ombreggiati di blu, il che è più coerente con il tema della modalità notturna dell'app.

Tieni presente che i marcatori dei PDI sono ancora rossi perché non hai aggiunto stili al metodo onPoiClick().

3.3 Aggiungere un overlay

Un modo per personalizzare la mappa di Google è disegnare sopra. Questa tecnica è utile se vuoi evidenziare un particolare tipo di località, ad esempio i luoghi di pesca più frequentati. Sono supportati tre tipi di overlay:

  • Forme: puoi aggiungere polilinee, poligoni e cerchi alla mappa.
  • Oggetti TileOverlay: un overlay riquadro definisce un insieme di immagini che vengono aggiunte sopra i riquadri della mappa di base. Gli overlay delle tessere sono utili quando vuoi aggiungere immagini dettagliate alla mappa. Una sovrapposizione di tessere tipica copre una vasta area geografica.
  • Oggetti GroundOverlay: un overlay al suolo è un'immagine fissa su una mappa. A differenza dei segnaposto, 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.

In questo passaggio, aggiungi una sovrapposizione al suolo a forma di Android alla posizione della tua casa.

  1. Scarica questa immagine Android e salvala nella cartella res/drawable.
  2. In onMapReady(), dopo la chiamata per spostare la videocamera nella posizione iniziale, crea un oggetto GroundOverlayOptions. Assegna l'oggetto a una variabile denominata homeOverlay:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions();
  1. Utilizza il metodo BitmapDescriptorFactory.fromResource() per creare un oggetto BitmapDescriptor dall'immagine precedente. Passa l'oggetto al metodo image() dell'oggetto GroundOverlayOptions:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));
  1. Imposta la proprietà position per l'oggetto GroundOverlayOptions chiamando il metodo position(). Inserisci l'oggetto home LatLng e un float per la larghezza in metri dell'overlay desiderato. Per questo esempio, una larghezza di 100 m è ideale:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);
  1. Chiama addGroundOverlay() sull'oggetto GoogleMap. Passa l'oggetto GroundOverlayOptions:
mMap.addGroundOverlay(homeOverlay);
  1. Esegui l'app. Ingrandisci la tua posizione di casa e vedrai l'immagine di Android come overlay.

6. Attività 4: Attivare il monitoraggio della posizione e Street View

Gli utenti utilizzano spesso Google Maps per vedere la loro posizione attuale e tu puoi ottenere la posizione del dispositivo utilizzando l'API Location Services. Per visualizzare la posizione del dispositivo sulla mappa senza utilizzare ulteriormente i dati Location, puoi utilizzare il livello dei dati sulla posizione.

Il livello dati sulla posizione aggiunge un pulsante La mia posizione in alto a destra della 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.

Una mappa di Google con stile e monitoraggio della posizione

Puoi fornire informazioni aggiuntive su una località utilizzando Google Street View, una foto panoramica navigabile di una determinata località.

In questa attività, attivi il livello dei dati sulla posizione e Street View in modo che quando l'utente tocca la finestra informativa dell'indicatore PDI, la mappa passi alla modalità Street View.

4.1 Attiva il monitoraggio della 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 accesso alla posizione (utilizzando il modello di autorizzazione di runtime).

In questo passaggio, richiedi le autorizzazioni di accesso alla posizione e attivi 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.
  2. Per attivare il monitoraggio della posizione nella tua app, crea un metodo in MapsActivity chiamato enableMyLocation() che non accetta argomenti e non restituisce nulla.
  3. Definisci il metodo enableMyLocation(). Controlla l'autorizzazione ACCESS_FINE_LOCATION. Se l'autorizzazione è concessa, attiva il livello della posizione. In caso contrario, richiedi l'autorizzazione:
private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}
  1. Chiama enableMyLocation() dal callback onMapReady() per attivare il livello della posizione.
  2. Esegui l'override del metodo onRequestPermissionsResult(). Se l'autorizzazione viene concessa, chiama il numero enableMyLocation():
@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}
  1. Esegui l'app. L'angolo in alto a destra ora contiene il pulsante La mia posizione, che mostra la posizione attuale del dispositivo.

4.2 Attivare Street View

Google Maps fornisce Street View, una visualizzazione panoramica di una località con controlli per navigare lungo un percorso designato. Street View non ha una copertura globale.

In questo passaggio, attivi un panorama di Street View che viene attivato quando l'utente tocca la finestra delle informazioni di un punto d'interesse. Devi fare due cose:

  1. Distinguere i marcatori dei PDI dagli altri marcatori, perché vuoi che la funzionalità della tua app funzioni solo sui marcatori dei PDI. In questo modo, puoi avviare Street View quando l'utente tocca una finestra informativa del punto d'interesse, ma non quando tocca un altro tipo di indicatore.

La classe Marker include un metodo setTag() che consente di allegare i dati. I dati possono essere qualsiasi cosa che si estenda da Object. Imposterai un tag sui marker creati quando gli utenti fanno clic sui PDI.

  1. Quando l'utente tocca una finestra informativa taggata in un OnInfoWindowClickListener, sostituisci MapFragment con un StreetViewPanoramaFragment. Il codice riportato di seguito utilizza SupportMapFragment e SupportStreetViewPanoramaFragment per supportare le versioni di Android precedenti all'API 12.

Se uno dei frammenti cambia in fase di runtime, devi aggiungerli nella classe Activity contenitore e non staticamente in XML.

Tagga l'indicatore PDI

  1. Nel callback onPoiClick(), chiama setTag() il giorno poiMarker. Passa una stringa arbitraria:
poiMarker.setTag("poi");

Sostituisci SupportMapFragment statico con un'istanza di runtime

  1. Apri activity_maps.xml e modifica l'elemento in un layout frame che fungerà da contenitore per i frammenti:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
  1. In onCreate() in MapsActivity, rimuovi il codice che trova SupportMapFragment per ID, perché non esiste più un SupportMapFragment statico nell'XML. Crea invece una nuova istanza di runtime di SupportMapFragment chiamando SupportMapFragment.newInstance():
SupportMapFragment mapFragment = SupportMapFragment.newInstance();
  1. Aggiungi il frammento a FrameLayout utilizzando una transazione di frammento con FragmentManager:
getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();
  1. Mantieni la riga di codice che attiva il caricamento asincrono della mappa:
mapFragment.getMapAsync(this);

Impostare un OnInfoWindowClickListener e controllare il tag del marker

  1. Crea uno stub del metodo in MapsActivity denominato setInfoWindowClickToPanorama() che accetta un GoogleMap come argomento e restituisce void:
private void setInfoWindowClickToPanorama(GoogleMap map) {}
  1. Imposta un OnInfoWindowClickListener su GoogleMap:
map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });
  1. Nel metodo onInfoWindowClick(), verifica se il marcatore contiene il tag stringa impostato nel metodo onPoiClick():
if (marker.getTag() == "poi") {}

Sostituisci SupportMapFragment con SupportStreetViewPanoramaFragment

  1. Nel caso in cui il marcatore contenga il tag, specifica la posizione del panorama Street View utilizzando un oggetto StreetViewPanoramaOptions. Imposta la proprietà position dell'oggetto sulla posizione del marcatore passato:
StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());
  1. Crea una nuova istanza di SupportStreetViewPanoramaFragment, passando l'oggetto options che hai creato:
SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);
  1. Avvia una transazione di frammento. Sostituisci i contenuti del contenitore di frammenti con il nuovo frammento, streetViewFragment. Aggiungi la transazione allo stack precedente, in modo che premendo Indietro si torni a SupportMapFragment e non si esca dall'app:
getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();
  1. Chiama setInfoWindowClickToPanorama(mMap) al numero onMapReady() dopo la chiamata a setPoiClick().
  2. Esegui l'app. Aumenta lo zoom su una città con copertura Street View, ad esempio Mountain View (sede di Google HQ), e trova un punto d'interesse, ad esempio un parco. Tocca il PDI per posizionare un indicatore e visualizzare la finestra informativa. Tocca la finestra informativa per passare alla modalità Street View per la posizione del marcatore. Premi il pulsante Indietro per tornare al frammento della mappa.

Google Street View in un&#39;app per Android

7. Codice della soluzione

Codice della soluzione Wander.

8. Sfida di programmazione

Problema:se tocchi la finestra informativa di un PDI in una località in cui non è disponibile la copertura di Street View, viene visualizzata una schermata nera.

9. Riepilogo

  • 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() richiesto.

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.
  • Nessuna**:** nessuna mappa.

Informazioni su Google Maps:

  • Un indicatore è un indicatore per una posizione geografica specifica.
  • Quando viene toccato, il comportamento predefinito dell'indicatore è visualizzare una finestra informativa con informazioni sulla località.
  • Per impostazione predefinita, i punti di interesse 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 utilizzando il metodo mMap.setMyLocationEnabled(true).
  • Google Street View offre viste panoramiche a 360 gradi dalle strade designate in tutta l'area di copertura.
  • Utilizza il metodo StreetViewPanoramaFragment.newInstance() per creare un nuovo frammento di Street View.
  • Per specificare le opzioni per la visualizzazione, utilizza un oggetto StreetViewPanoramaOptions. Passa l'oggetto al metodo newInstance().

10. Scopri di più

La documentazione sul concetto correlato è disponibile in 9.1: API Google Maps.

Documentazione per sviluppatori Android:

Documentazione di riferimento:

11. Compiti

Questa sezione elenca i possibili compiti a casa per gli studenti che seguono questo codelab nell'ambito di un corso guidato da un insegnante. Spetta all'insegnante:

  • Assegna i compiti, se richiesto.
  • Comunica agli studenti come inviare i compiti.
  • Valuta i compiti a casa.

Gli insegnanti possono utilizzare questi suggerimenti nella misura che ritengono opportuna e sono liberi di assegnare qualsiasi altro compito a casa che ritengono appropriato.

Se stai seguendo questo codelab in autonomia, sentiti libero di utilizzare questi compiti per casa per mettere alla prova le tue conoscenze.

Crea ed esegui un'app

  1. Crea una nuova app che utilizzi il modello di attività Google Maps, che carica Google Maps all'avvio dell'app.
  2. Quando la mappa di Google viene caricata, sposta la videocamera sulla posizione della tua scuola, della tua casa o su un'altra posizione significativa per te.
  3. Aggiungi due indicatori alla mappa, uno nella posizione della scuola e uno nella tua casa o in un altro luogo significativo.
  4. Personalizza le icone dei segnaposto modificando il colore predefinito o sostituendo l'icona predefinita del segnaposto con un'immagine personalizzata.

Suggerimento:consulta la documentazione relativa a onMapReady (GoogleMap googleMap).

Rispondi a queste domande

Domanda 1

Quale metodo viene chiamato quando la mappa viene caricata ed è pronta per essere utilizzata nell'app?

Domanda 2

Quali componenti Android puoi utilizzare per includere Google Maps nella tua app?

  • MapView e MapFragment
  • MapFragment e MapActivity
  • MapView e MapActivity
  • Solo MapFragment

Domanda 3

Quali tipi di mappe offre l'API Google Maps per Android?

  • Normale, ibrida, rilievo, satellite e roadmap
  • Normale, ibrida, rilievo, satellite e "nessuna"
  • Ibrida, rilievo, satellite, roadmap e "nessuna"
  • Normale, terreno, satellite, mappa delle immagini e "nessuno"

Domanda 4

Quale interfaccia implementi per aggiungere la funzionalità di clic a un punto d'interesse (PDI)?

  • GoogleMap.OnPoiListener
  • GoogleMap.OnPoiClickListener
  • GoogleMap.OnPoiClick
  • GoogleMap.OnPoiClicked

Invia la tua app per la classificazione

Indicazioni per i valutatori

Verifica che l'app disponga delle seguenti funzionalità:

  • Quando l'app viene avviata, Google Maps viene visualizzato correttamente, il che indica che è stata generata una chiave API.
  • Dopo il caricamento di Google Maps, la videocamera si sposta sulla posizione della casa o della scuola dello studente. Nel codice, questo passaggio deve essere eseguito nel metodo di callback onMapReady (GoogleMap googleMap).
  • I marcatori vengono visualizzati nella posizione della scuola dello studente e in un'altra posizione, ad esempio la casa dello studente.
  • I due indicatori sono personalizzati. Ad esempio, i marcatori utilizzano un colore diverso dal rosso predefinito o un'icona personalizzata.

12. Codelab successivo

Per visualizzare tutti i codelab del corso di formazione Advanced Android Development, visita la pagina di destinazione dei codelab Advanced Android Development.