Versione avanzata di Android 09.1: Google Maps

1. Ti diamo il benvenuto

Questo codelab fa parte del corso di formazione per lo sviluppo avanzato di Android, sviluppato dal team di formazione di Google Developers. Trarrai il massimo vantaggio da questo corso seguendo i codelab in sequenza.

Per informazioni dettagliate sul corso, consulta la panoramica sullo sviluppo avanzato per Android.

Introduzione

La creazione di app con Google Maps ti consente di aggiungere funzionalità alle tue app quali immagini satellitari, controlli dell'interfaccia utente affidabili, monitoraggio della posizione e indicatori di posizione. Puoi aggiungere valore alle mappe standard di Google Maps mostrando informazioni tratte dal tuo set di dati, ad esempio le località di note aree di pesca o di arrampicata. Puoi anche creare giochi legati al mondo reale, come Pokemon Go.

In questa pratica, crei un'app di Google Maps chiamata Wander.

Informazioni che dovresti già sapere

Dovresti conoscere i seguenti argomenti:

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

Obiettivi didattici

  • Integra una mappa Google nella tua app.
  • Visualizza diversi tipi di mappe.
  • Applica uno stile alla mappa di Google.
  • Aggiungi indicatori alla mappa.
  • Consente all'utente di posizionare un indicatore su un punto d'interesse (PDI).
  • 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, stile e monitoraggio della posizione.
  • Attiva il monitoraggio della posizione e Street View nella tua app.

2. Panoramica app

In questa pratica creerai l'app Wander, che è una mappa Google con stili applicati. L'app Wander ti consente di inserire indicatori sui luoghi, visualizzare la tua posizione in tempo reale e guardare 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, devi registrare il tuo progetto nella console API di Google. La chiave API è collegata a un certificato digitale che collega l'app al suo autore. Per ulteriori informazioni sull'utilizzo dei certificati digitali e sulla firma dell'app, vedi Firmare l'app.

In questo pratico caso, si utilizza la chiave API per il certificato di debug. Il certificato di debug non è sicuro, come descritto in Firmare la build di debug. Le app per Android pubblicate che utilizzano l'API di Google Maps richiedono una seconda chiave API: la chiave per il certificato di rilascio. Per ulteriori informazioni su come ottenere un certificato di rilascio, consulta l'argomento Recupero della chiave API.

Android Studio include un modello di attività su Google Maps, che genera un 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 Creare il progetto Wander con il modello di Maps

  1. Crea un nuovo progetto Android Studio.
  2. Assegna alla nuova app il nome "Wander". Accetta i valori predefiniti finché non accedi alla pagina Aggiungi un'attività.
  3. Seleziona il modello Attività su Google Maps.
  4. Lascia invariati i valori predefiniti Nome attività e Nome layout.
  5. Cambia il Titolo in "Passeggia" e fai clic su Fine.

Android Studio crea diversi file aggiuntivi relativi alle mappe:

google_maps_api**.xml**

Utilizza questo file di configurazione per contenere 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 nel percorso src/debug/res/values. Il file della chiave API per il certificato di rilascio si trova in src/release/res/values. In questo caso 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 per il corso SupportMapFragment e utilizza il metodo getMapAsync() del corso per preparare la mappa Google. L'attività che contiene SupportMapFragment deve implementare l'interfaccia OnMapReadyCallback e il metodo onMapReady() dell'interfaccia. Il metodo getMapAsync() restituisce un oggetto GoogleMap, a indicare che la mappa è stata caricata.

1.2 Ottenere 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. Grazie ai parametri nell'URL fornito, la console API sa che deve attivare automaticamente l'API di 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 nel punto YOUR_KEY_HERE.
  5. Esegui l'app. Nella tua attività è presente una mappa incorporata con un indicatore impostato a Sydney, in Australia. L'indicatore di Sydney fa parte del modello e lo modifichi in seguito.

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

Google Maps include diversi tipi di mappe: normale, ibrida, satellitare, rilievo e "nessuno". In questa attività aggiungi una barra delle app con un menu opzioni che consente all'utente di modificare il tipo di mappa. Puoi spostare la posizione iniziale della mappa nella tua località di residenza. Poi aggiungi il supporto degli indicatori, 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 vedere chiaramente i nomi delle vie. Quando fai un'escursione, probabilmente ti interessa di più quanto devi scalare per arrivare in cima alla montagna. In questo passaggio, aggiungi una barra dell'app con un menu 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 codice seguente per creare le opzioni della mappa. "Nessuno" tipo di mappa omesso, perché "nessuno" comporta l'assenza di 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 per estendere la classe AppCompatActivity anziché estendere la classe FragmentActivity. Se usi AppCompatActivity viene visualizzata la barra delle app e quindi il menu.
  3. In MapsActivity, sostituisci il 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 di tipo mappa.

Esegui l'override del metodo onOptionsItemSelected(). Incolla il codice seguente 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. Osserva come cambia l'aspetto della mappa.

2.2 Spostare la posizione predefinita sulla mappa

Per impostazione predefinita, il callback onMapReady() include il codice che posiziona un indicatore a Sydney, in Australia, dove è stato creato Google Maps. Il callback predefinito anima anche la mappa per eseguire la panoramica verso Sydney. In questo passaggio, rendi la mappa panoramica fino alla tua località di residenza senza posizionare un indicatore, poi esegui lo zoom fino a un livello da te specificato.

  1. Nel metodo onMapReady(), rimuovi il codice che posiziona l'indicatore a Sydney e sposta la videocamera.
  2. Vai su www.google.com/maps nel tuo browser e individua la tua casa.
  3. Fai clic con il tasto destro del mouse sulla località 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 da Google Maps nel browser.
  2. Crea una variabile float denominata zoom e impostala sul livello di zoom iniziale desiderato. L'elenco che segue 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 fotocamera chiamando moveCamera() sull'oggetto GoogleMap, passando il nuovo oggetto CameraUpdate:
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));
  1. Esegui l'app. La mappa dovrebbe eseguire una panoramica fino alla tua casa e aumentare lo zoom del livello desiderato.

2.3 Aggiungere indicatori

Google Maps è in grado di individuare un luogo mediante un indicatore, che puoi creare utilizzando la classe Marker. L'indicatore predefinito utilizza l'icona standard di Google Maps: indicatore di Google Maps

Puoi estendere gli indicatori per mostrare le informazioni contestuali nelle finestre informative.

In questo passaggio, devi aggiungere un indicatore quando l'utente tocca e tiene premuto un luogo sulla mappa. Poi aggiungi un InfoWindow che mostra le coordinate dell'indicatore quando quest'ultimo viene toccato.

Una finestra informativa per un segnaposto inserito

  1. Crea in MapsActivity uno stub di metodo denominato setMapLongClick() che prende un GoogleMap final 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 arrivo è un oggetto LatLng che contiene le coordinate della posizione su 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 trasmesso:
map.addMarker(new MarkerOptions().position(latLng));
  1. Richiama setMapLongClick() al termine del metodo onMapReady(). Passa in mMap.
  2. Esegui l'app. Tocca e tieni premuto sulla mappa per posizionare un indicatore in un luogo.
  3. Tocca l'indicatore in modo che venga centrato sullo schermo.

I pulsanti di navigazione vengono visualizzati nella parte 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 l'indicatore:

  1. Nell'oggetto MarkerOptions, imposta i campi title e snippet.
  2. In onMapLongClick(), imposta il campo title su "Segnaposto inserito". 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 l'indicatore per mostrare la finestra informativa.

2.4 Aggiungere un listener di PDI

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

In questo passaggio, aggiungi una GoogleMap.OnPoiClickListener alla mappa. Questo elenco di ascolto dei clic posiziona immediatamente un indicatore sulla mappa, senza dover aspettare il tocco e in sospeso. L'ascoltatore dei clic visualizza anche la finestra informativa contenente il nome del PDI.

Indicatore del punto di interesse

  1. Crea in MapsActivity uno stub di metodo denominato setPoiClick() che prende un GoogleMap final come argomento e restituisce void:
private void setPoiClick(final GoogleMap map) {}
  1. Nel metodo setPoiClick(), imposta un OnPoiClickListener sul valore GoogleMap trasmesso:
map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});
  1. Nel metodo onPoiClick(), posiziona un indicatore in corrispondenza della posizione del PDI. Imposta il titolo sul nome del PDI. 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() al numero poiMarker per mostrare immediatamente la finestra informativa.
poiMarker.showInfoWindow();
  1. Chiama setPoiClick() al termine di onMapReady(). Passa in mMap.
  2. Esegui l'app e trova un PDI come un parco. Tocca il PDI per posizionare un indicatore e visualizzarne il nome in una finestra informativa.

5. Attività 3: Definizione dello stile della mappa

Puoi personalizzare Google Maps in molti modi, dando 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 personalizzerai l'aspetto dei contenuti di MapFragment, utilizzando i metodi sull'oggetto GoogleMap. Utilizzi la procedura guidata per gli stili online per aggiungere uno stile alla mappa e personalizzare gli indicatori. Puoi anche aggiungere alla posizione della tua casa una GroundOverlay che scala e ruota con la mappa.

3.1 Aggiungere uno stile alla mappa

Per creare uno stile personalizzato per la mappa, generi un file JSON che specifica come vengono visualizzati gli elementi nella mappa.Non devi creare questo file JSON manualmente: Google fornisce la procedura guidata per gli stili, che genera automaticamente il file JSON dopo aver applicato uno stile alla mappa. In questo pratico, puoi definire lo stile della mappa per la "modalità notturna", il che significa che la mappa utilizza colori attenuati e basso contrasto per l'uso notturno.

  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 nella parte inferiore del menu.
  5. In fondo all'elenco Tipo di elemento, seleziona Acqua > Riempi. Cambia il colore dell'acqua in blu scuro (ad es. #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 in res/raw denominato map_style.json.
  8. Incolla il codice JSON nel nuovo file di risorsa.
  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 il successo dello stile. Se il file non può essere caricato, il metodo genera un Resources.NotFoundException.

Copia il seguente codice nel metodo onMapReady() per applicare uno 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.

Mappa di Google in stile modalità notturna

3.2 Applicare uno stile all'indicatore

Puoi personalizzare ulteriormente la mappa assegnando uno stile agli indicatori. In questo passaggio, modificherai gli indicatori 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 l'indicatore predefinito, ma cambia il colore in blu:
.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))
  1. Esegui l'app. Gli indicatori posizionati sono ora blu ombreggiati, in modo da essere più coerente con il tema della modalità notturna dell'app.

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

3.3 Aggiungere un overlay

Un modo per personalizzare una mappa di Google è disegnarci sopra. Questa tecnica è utile se vuoi mettere in evidenza un particolare tipo di località, come punti di pesca molto conosciuti. 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 sui riquadri della mappa base. Gli overlay riquadro sono utili quando vuoi aggiungere immagini di grandi dimensioni alla mappa. Un tipico overlay di riquadri copre un'ampia area geografica.
  • GroundOverlay oggetti: un overlay al suolo è un'immagine fissata a una mappa. A differenza degli indicatori, le sovrapposizioni del suolo sono orientate alla superficie terrestre anziché allo schermo. La rotazione, l'inclinazione o lo zoom della mappa modifica l'orientamento dell'immagine. Le sovrapposizioni del suolo sono utili quando vuoi correggere una singola immagine in un'area della mappa

In questo passaggio, aggiungi all'indirizzo di casa tua un overlay al suolo a forma di Android.

  1. Scarica questa immagine Android e salvala nella cartella res/drawable.
  2. In onMapReady(), dopo la chiamata per spostare la videocamera in posizione originale, 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 sopra. Passa l'oggetto nel 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(). Supera l'oggetto home LatLng e un float per la larghezza in metri dell'overlay desiderato. In questo esempio, una larghezza di 100 m funziona bene:
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);
  1. Chiama addGroundOverlay() sull'oggetto GoogleMap. Passa il tuo oggetto GroundOverlayOptions:
mMap.addGroundOverlay(homeOverlay);
  1. Esegui l'app. Aumenta lo zoom sul luogo della tua casa e vedrai l'immagine Android come overlay.

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

Gli utenti spesso usano 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 dover utilizzare ulteriormente i dati di Location, puoi utilizzare il livello dati sulla posizione.

Il livello dati sulla posizione aggiunge un pulsante La mia posizione nell'angolo in alto a destra della mappa. Quando l'utente tocca il pulsante, la mappa viene centrata sulla posizione del dispositivo. La posizione è indicata da un punto blu se il dispositivo è fermo e da uno 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, ovvero 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 Attivare il monitoraggio della posizione

L'attivazione del monitoraggio della posizione in Google Maps richiede una singola 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, dovrai richiedere le autorizzazioni di accesso alla posizione e attivare 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 denominato enableMyLocation() che non accetta argomenti e non restituisca nulla.
  3. Definisci il metodo enableMyLocation(). Verifica la presenza dell'autorizzazione ACCESS_FINE_LOCATION. Se l'autorizzazione viene concessa, abilita il livello di localizzazione. 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 di località.
  2. Esegui l'override del metodo onRequestPermissionsResult(). Se l'autorizzazione viene concessa, chiama 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 offre Street View, una vista panoramica di un luogo con controlli per la navigazione lungo un percorso designato. Street View non ha una copertura globale.

In questo passaggio, viene attivata una panoramica in Street View che viene attivata quando l'utente tocca la finestra informativa di un PDI. Devi fare due cose:

  1. Distingui gli indicatori dei PDI dagli altri, perché vuoi che la funzionalità della tua app funzioni solo sugli indicatori dei PDI. In questo modo, puoi avviare Street View quando l'utente tocca la finestra informativa dei PDI, ma non quando tocca qualsiasi 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 estende da Object). Imposterai un tag sugli indicatori che vengono creati quando gli utenti fanno clic sui PDI.

  1. Quando l'utente tocca una finestra informativa con tag in una OnInfoWindowClickListener, sostituisci MapFragment con 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 contenitore Activity e non in modo statico in XML.

Codificare l'indicatore PDI

  1. Nel callback onPoiClick(), chiama setTag() al numero poiMarker. Trasmetti qualsiasi stringa arbitraria:
poiMarker.setTag("poi");

Sostituisci il supporto statico SupportMapFragment con un'istanza di runtime

  1. Apri activity_maps.xml e modifica l'elemento con un layout a 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 nel file 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 del frammento con il 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);

Imposta un OnInfoWindowClickListener e controlla il tag indicatore

  1. Crea in MapsActivity uno stub di metodo denominato setInfoWindowClickToPanorama() che prende 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. Con il metodo onInfoWindowClick(), verifica se l'indicatore contiene il tag stringa che hai impostato nel metodo onPoiClick():
if (marker.getTag() == "poi") {}

Sostituisci SupportMapFragment con un valore SupportStreetViewPanoramaFragment

  1. Se l'indicatore contiene il tag, specifica la posizione della panoramica di Street View utilizzando un oggetto StreetViewPanoramaOptions. Imposta la proprietà position dell'oggetto sulla posizione dell'indicatore di passaggio:
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 con frammento. Sostituisci i contenuti del container dei frammenti con il nuovo frammento, streetViewFragment. Aggiungi la transazione allo stack posteriore in modo che, premendo Indietro, torni a SupportMapFragment e non esci dall'app:
getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();
  1. Chiama setInfoWindowClickToPanorama(mMap) in onMapReady() dopo la chiamata al numero setPoiClick().
  2. Esegui l'app. Ingrandisci una città con una copertura di Street View, ad esempio Mountain View (sede della sede centrale di Google), e trova un PDI, ad esempio un parco. Tocca il PDI per posizionare un indicatore e mostrare la finestra informativa. Tocca la finestra informativa per attivare la modalità Street View per la posizione dell'indicatore. Premi il pulsante indietro per tornare al frammento della mappa.

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

7. Codice soluzione

Codice della soluzione Wander.

8. Sfida di programmazione

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

9. Riepilogo

  • Per utilizzare l'API di Google Maps, è necessaria una chiave API contenuta nella console API di Google.
  • In Android Studio, l'utilizzo del modello di attività su Google Maps genera un Activity con un singolo SupportMapFragment nel layout dell'app. Il modello aggiunge anche ACCESS_FINE_PERMISSION al file manifest dell'app, implementa OnMapReadyCallback nella tua attività e sostituisce il metodo onMapReady() richiesto.

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

  • Normale: tipica mappa stradale. Mostra le strade, alcuni elementi costruiti da esseri umani e importanti elementi naturali come i fiumi. Sono visibili anche le etichette di strade e elementi.
  • Ibrido: dati fotografici satellitari a cui sono state aggiunte mappe stradali. Sono visibili anche le etichette di strade e elementi.
  • Satellite: dati fotografici. Le etichette di strade e elementi non sono visibili.
  • Rilievo: dati topografici. La mappa include colori, linee di contorno ed etichette e ombreggiatura prospettica. Alcune strade ed etichette sono visibili.
  • Nessuna**:** nessuna mappa.

Informazioni su Google Maps:

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

Altre informazioni importanti

  • Utilizza un overlay al suolo per correggere un'immagine in base a una posizione geografica.
  • Utilizza un oggetto GroundOverlayOptions per specificare l'immagine, le sue dimensioni in metri e la posizione dell'immagine. Passa questo oggetto al metodo GoogleMap.addGroundOverlay() per impostare l'overlay sulla mappa.
  • Se la tua app dispone 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° delle 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 della vista, utilizza un oggetto StreetViewPanoramaOptions. Passa l'oggetto al metodo newInstance().

10. Scopri di più

La documentazione concettuale correlata si trova nella sezione 9.1: API di Google Maps.

Documentazione per gli sviluppatori Android:

Documentazione di riferimento:

11. Compiti

In questa sezione sono elencati i possibili compiti per gli studenti che stanno utilizzando questo codelab nell'ambito di un corso tenuto da un insegnante. e spetta all'istruttore le seguenti operazioni:

  • Assegna i compiti, se necessario.
  • Spiega agli studenti come inviare i compiti.
  • Valuta i compiti.

Gli istruttori possono utilizzare questi suggerimenti quanto vogliono e possono assegnare qualsiasi altro compito che ritengono appropriati.

Se ti stai occupando di questo codelab in autonomia, usa questi compiti per verificare le tue conoscenze.

Crea ed esegui un'app

  1. Crea una nuova app che utilizzi il modello Attività su Google Maps, che carica Google Maps all'avvio dell'app.
  2. Quando la mappa di Google è stata caricata, sposta la videocamera nella posizione della tua scuola, in quella di casa o in un altro luogo per te significativo.
  3. Aggiungi due indicatori alla mappa, uno in corrispondenza della sede della scuola e uno in casa o in un altro luogo significativo.
  4. Personalizza le icone degli indicatori modificando il colore predefinito o sostituendo l'icona dell'indicatore predefinito con un'immagine personalizzata.

Suggerimento: consulta la documentazione di 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 di Google Maps per Android?

  • Normale, ibrido, rilievo, satellite e roadmap
  • Normale, ibrido, rilievo, satellite e "nessuno"
  • Ibrido, rilievo, satellite, roadmap e "nessuno"
  • Normale, rilievo, satellite, mappaimmagine e "nessuno"

Domanda 4

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

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

Inviare l'app per la valutazione

Indicazioni per i valutatori

Verifica che l'app disponga delle seguenti funzionalità:

  • All'avvio dell'app, la mappa di Google viene visualizzata correttamente, a indicare che la chiave API è stata generata correttamente.
  • Una volta caricata la mappa di Google, la videocamera si sposta nella località di residenza o della scuola dello studente. Nel codice, questo passaggio dovrebbe avvenire nel metodo di callback onMapReady (GoogleMap googleMap).
  • Gli indicatori vengono mostrati nella sede della scuola dello studente e in un'altra posizione, ad esempio la casa dello studente.
  • I due indicatori sono personalizzati. Ad esempio, gli indicatori utilizzano un colore diverso da quello predefinito, oppure un'icona personalizzata.

12. Codelab successivo

Per vedere tutti i codelab nel corso di formazione Advanced Android Development, visita la pagina di destinazione dei codelab per lo sviluppo avanzato di Android.