Aggiungi una mappa con stili

Seleziona piattaforma: Android iOS JavaScript

Questo tutorial mostra come aggiungere una mappa con stili personalizzati alla tua app Android. Il tutorial utilizza la modalità notturna come esempio di stile personalizzato.

Con le opzioni per gli stili puoi personalizzare la presentazione degli stili standard delle mappe di Google, modificando la visualizzazione visiva di elementi quali strade, parchi, attività commerciali e altri punti d'interesse. Ciò significa che puoi enfatizzare componenti specifici della mappa o fare in modo che si integri con lo stile della tua app.

Gli stili possono essere visualizzati solo sul tipo di mappa normal. Lo stile non influisce sulle mappe coperte.

Ottieni il codice

Clona o scarica il repository Esempi di API di Google Maps per Android v2 da GitHub.

Configura il tuo progetto di sviluppo

Per creare il progetto tutorial in Android Studio, segui i passaggi riportati di seguito.

  1. Scarica e installa Android Studio.
  2. Aggiungi il pacchetto Google Play Services ad Android Studio.
  3. Clona o scarica il repository Esempi di API di Google Maps per Android v2 se non l'hai fatto quando hai iniziato a leggere questo tutorial.
  4. Importa il progetto del tutorial:

    • In Android Studio, seleziona File > Nuovo > Importa progetto.
    • Vai alla posizione in cui hai salvato il repository esempi di API Google Maps v2 dopo averlo scaricato.
    • Trova il progetto StyledMap in questa posizione:
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Seleziona la directory del progetto e fai clic su OK. Android Studio ora crea il tuo progetto utilizzando lo strumento di creazione Gradle.

Ottieni una chiave API e abilita le API necessarie

Per completare questo tutorial, hai bisogno di una chiave API di Google autorizzata a utilizzare l'SDK Maps per Android.

Fai clic sul pulsante in basso per ottenere una chiave e attivare l'API.

Procurati una chiave

Per ulteriori dettagli, consulta la guida Ottenere una chiave API.

Aggiungi la chiave API alla tua app

  1. Modifica il file gradle.properties del tuo progetto.
  2. Incolla la chiave API nel valore della proprietà GOOGLE_MAPS_API_KEY. Quando crei la tua app, Gradle copia la chiave API nel file manifest Android dell'app.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Crea ed esegui la tua app

  1. Collega un dispositivo Android al computer. Segui le istruzioni per attivare le opzioni sviluppatore sul tuo dispositivo Android e configura il tuo sistema per rilevarlo. In alternativa, puoi utilizzare Android Virtual Device (AVD) Manager per configurare un dispositivo virtuale. Quando scegli un emulatore, assicurati di scegliere un'immagine che includa le API di Google. Per ulteriori dettagli, consulta la guida introduttiva.
  2. In Android Studio, fai clic sull'opzione di menu Esegui (o sull'icona del pulsante di riproduzione). Scegli un dispositivo come richiesto.

Android Studio richiama Gradle per creare l'app, quindi esegue l'app sul dispositivo o sull'emulatore. Dovresti vedere una mappa con stili scuri (modalità notturna) simile all'immagine in questa pagina.

Risoluzione dei problemi:

Comprendere il codice

Questa parte del tutorial spiega le parti più significative dell'app StyledMap per aiutarti a capire come creare un'app simile.

Aggiungi una risorsa contenente un oggetto di stile JSON

Aggiungi una risorsa al progetto di sviluppo contenente le dichiarazioni di stile in formato JSON. Puoi usare una risorsa non elaborata o una stringa, come mostrato negli esempi di seguito.

Risorsa non elaborata

Definisci una risorsa non elaborata in /res/raw/style_json.json, contenente la dichiarazione di stile JSON per gli stili in modalità notturna:

Risorsa stringa

Definisci una risorsa stringa in /res/values/style_strings.xml, contenente la dichiarazione di stile JSON per gli stili in modalità notturna. Questo tutorial utilizza il nome della stringa style_json. In questo file devi utilizzare una barra rovesciata per evitare le virgolette:

Come trasmettere un oggetto JSON alla mappa

Per definire lo stile della mappa, chiama GoogleMap.setMapStyle() passando un oggetto MapStyleOptions che contiene le tue dichiarazioni di stile in formato JSON.

Risorsa non elaborata

Il seguente esempio di codice presuppone che il tuo progetto contenga una risorsa non elaborata denominata style_json:

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise 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.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Il layout (activity_maps_raw.xml) ha il seguente aspetto:

Risorsa stringa

Il seguente esempio di codice presuppone che il tuo progetto contenga una risorsa stringa denominata style_json:

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

Il layout (activity_maps_string.xml) ha il seguente aspetto:

Scopri di più sulle dichiarazioni in stile JSON

Le mappe con stile utilizzano due concetti per applicare colori e altre modifiche allo stile a una mappa:

  • I selettori specificano i componenti geografici che puoi definire nella mappa. Tra queste figurano strade, parchi, specchi d'acqua e così via, nonché le relative etichette. I selettori includono funzionalità ed elementi, specificati come proprietà featureType e elementType.
  • I styler sono proprietà di colore e visibilità che puoi applicare agli elementi della mappa. Definiscono il colore visualizzato mediante una combinazione di valori di tonalità, colore e luminosità/gamma.

Consulta la documentazione di riferimento stile per una descrizione dettagliata delle opzioni di stile JSON.

Procedura guidata di applicazione di Maps Platform

Utilizza la procedura guidata di applicazione di stili in Maps Platform come modo rapido per generare un oggetto JSON. L'SDK Maps per Android supporta le stesse dichiarazioni di stile dell'API Maps JavaScript.

Passaggio successivo

Scopri come nascondere gli elementi sulla mappa con stile.