Android Lezione 17 – Aggiungiamo le mappe alla nostra app Parte 2

Eccoci finalmente alla seconda parte dell’introduzione alle mappe android, la lezione precedente era principalmente incentrata sul far andare google maps sull’emulatore e su come configurare la nostra app per poter visualizzare le mappe,

In questa seconda parte spiegheremo nel dettaglio il codice di esempio di google utilizzato nella lezione, spiegando metodo per metodo cosa viene fatto

Quindi ora riprendiamo il codice della parte uno e spieghiamolo nel dettaglio:

 

import com.google.android.gms.maps.*;
import com.google.android.gms.maps.model.*;
import android.app.Activity;
import android.os.Bundle;
 
public class MapPane extends Activity implements OnMapReadyCallback {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.map_activity);
 
        MapFragment mapFragment = (MapFragment) getFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
 
    @Override
    public void onMapReady(GoogleMap map) {
        LatLng sydney = new LatLng(-33.867, 151.206);
 
        map.setMyLocationEnabled(true);
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 13));
 
        map.addMarker(new MarkerOptions()
                .title("Sydney")
                .snippet("The most populous city in Australia.")
                .position(sydney));
    }
}

Questa applicazione carica una mappa in maniera asincrona, e quando è pronta per essere mostrata vi pone un marker sulla localitá di Sydney

Prima di trutto l’app ottiene un istanza dell’oggetto R.id.Map, che sará di tipo MapFragment, dopo di che chiede la mappa al server, tramite il metodo getMapAsync. Da notare che questa richiesta avviene in maniera asincrona, quindi l’applicazione, non si blocca in attesa che la mappa sia pronta, bensì va avanti con l’esecuzione.

Il metodo getMapAsync ha la seguente firma:

public void getMapAsync (OnMapReadyCallback callback)

Che come possiamo vedere prende un solo argomento, ovvero un oggetto di tipo OnMapReadyCallback, che contiene il metodo di callback, che verrá chiamato quando la mappa sará pronta per l’uso.

Ora se si guarda alla definizione della classe, questa implementa il l’interfaccia OnMapReadyCallback, infatti la chiamata:

mapFragment.getMapAsync(this);

ha come argomento la classe stessa. Ovviamente come si potrá facilmente intuire il metodo chiamato dalla callback è OnMapReady(…).

All’interno di questo metodo si va a posizionare il marker ecco il codice spiegato riga per riga.

  • Questa funzione prende un solo parametro, che è di tipo GoogleMap, questo oggetto è l’oggetto base per accedere e lavorare con le mappe di google. È importante notare che l’oggetto GoogleMap può essere letto e o scritto solo nel thread principale, e se si fa al di fuori di questo si ottiene un eccezione. Inoltre questo oggetto non può essere nemmeno istanziato, ma bisogna ottenerne una istanza utilizzando il metodo getAsyncMap(…).

Passiamo alla prima riga di questo metodo:

 LatLng sydney = new LatLng(-33.867, 151.206);

Stiamo creando un oggetto di tipo LatLng, come si può intuire facilmente dal nome, questo oggetto contiene le coordinate geografiche di un punto, gli argomenti sono specificati nell’ordine di latitudine e longitudine.

map.setMyLocationEnabled(true);

Con questa abilitiamo il layer my-location, che contiene i controlli per interagire con la nostra posizione e la mostra sulla mappa.

map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 13));

In questo caso spostiamo la posiziione di visualizzazione della mappa (viene gestita come fosse una telecamera).

L’oggetto CameraUpdateFactory, contiene metodi per gestire la posizione della “telecamera” di google maps, in questo caso il metodo newLatLngZoom posiziona la mappa in modo tale che l’oggetto puntato da sydney (di tipo LatLng ricordo) risulti al centro dello schermo, mentre il secondo parametro è il fattore di zoom, che può variare da 2, a 21.0.

Passimo ora all’ultimo blocco di codice:

map.addMarker(new MarkerOptions()
                .title("Sydney")
                .snippet("The most populous city in Australia.")
                .position(sydney));

In questo caso il codice è abbastanza semplice da capire stiamo:

  • con il metodo addMarker stiamo aggiungendo un marker sulla mappa
  • L’argomento di addMarker è un oggetto di tipo MarkerOptions al quale sono stati settati i seguenti parametri: Titolo, una breve descrizione e la posizione dove deve apparire (definita nell’oggetto LatLng).

I dati aggiunti (titolo e descrizione), vengono mostrati se si tappa sul marker in un piccolo popup.

Il risultato dovrebbe essere simile al seguente:

Screenshot Google Maps

P.s.: Mi sono accorto che nella lezione 16, avevo omesso un piccolo pezzo riguardante il file xml da creare per l’app, l’ho aggiornata e sistemato l’errore.

Leave a Reply

Your email address will not be published. Required fields are marked *