Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps Android API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou choisir un projet
  2. Activer Google Maps Android API
  3. Créer les clés appropriées
Continuer

Ajouter une carte stylisée

Ce didacticiel vous montre comment ajouter une carte avec un style personnalisé à votre application Android. Il utilise le mode nocturne comme exemple de style personnalisé.

Avec les options de style, vous pouvez personnaliser la présentation des styles de carte Google standard en modifiant le visuel de composants tels que les routes, les établissements et d'autres points d'intérêt. Cela signifie que vous pouvez faire ressortir des composants spécifiques sur la carte ou assortir la carte au style de votre application.

L'application de styles ne fonctionne qu'avec le type de carte normal.

Obtenir le code

Clonez ou téléchargez le référentiel Google Maps Android API v2 Samples depuis GitHub.

Configurer votre projet de développement

Suivez les étapes ci-dessous pour créer le projet du didacticiel dans Android Studio.

  1. Téléchargez et installez Android Studio.
  2. Ajoutez le package de services Google Play à Android Studio.
  3. Clonez ou téléchargez le référentiel Google Maps Android API v2 Samples si vous ne l'avez pas déjà fait au début de ce didacticiel.
  4. Importez le projet du didacticiel :

    • Dans Android Studio, sélectionnez File > New > Import Project.
    • Accédez à l'emplacement où vous avez enregistré le référentiel Google Maps Android API v2 Samples après l'avoir téléchargé.
    • Recherchez le projet StyledMap à l'emplacement suivant :
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • Sélectionnez le répertoire du projet, puis cliquez sur OK. Android Studio construit à présent votre projet à l'aide de l'outil Gradle.

Obtenir une clé d'API et activer les API nécessaires

Pour suivre ce didacticiel jusqu'au bout, vous avez besoin d'une clé d'API Google qui soit autorisée à utiliser Google Maps Android API.

Cliquez sur le bouton ci-dessous pour obtenir une clé et activer l'API.

Get a Key

Pour plus d'informations, voir le guide complet qui explique comment obtenir une clé d'API.

Ajouter la clé d'API à votre application

  1. Modifiez le fichier gradle.properties de votre projet.
  2. Collez votre clé d'API dans la valeur de la propriété GOOGLE_MAPS_API_KEY. Lorsque vous créez l'application, Gradle copie la clé d'API dans le fichier manifeste Android de l'application.

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

Créer et exécuter votre application

  1. Connectez un appareil Android à votre ordinateur. Suivez les instructions pour activer les options réservées aux développeurs sur votre appareil Android et configurer votre système afin qu’il détecte l'appareil. (Vous pouvez également utiliser l'outil Android Virtual Device (AVD) Manager pour configurer un appareil virtuel. Lorsque vous choisissez un émulateur, assurez-vous de sélectionner une image qui inclut les API Google. Pour plus de détails, voir le guide de démarrage.)
  2. Dans Android Studio, cliquez sur l'option de menu Run (ou l'icône de bouton de lecture). Choisissez un appareil lorsque vous y êtes invité.

Android Studio invoque Gradle pour créer l'application, puis l'exécute sur l'appareil ou l'émulateur. Vous devriez voir une carte avec un style sombre (mode nocturne), similaire à l'image sur cette page.

Résolution des erreurs :

  • Si aucune carte ne s'affiche, vérifiez que vous avez bien obtenu une clé d'API et que vous l'avez ajoutée à l'application, tel que décrit plus haut. Examinez le journal de l'outil Android Monitor d'Android Studio pour vérifier s'il contient des messages d'erreur concernant la clé d'API.
  • Utilisez les outils de débogage d'Android Studio pour afficher les journaux et déboguer l'application.

Comprendre le code

Cette partie du didacticiel décrit les principales composantes de l'application StyledMap pour vous aider à comprendre comment créer une application similaire.

Ajouter une ressource contenant un objet de style JSON

Ajoutez à votre projet de développement une ressource contenant vos déclarations de style au format JSON. Vous pouvez utiliser une ressource brute ou une chaîne, tel qu'illustré dans les exemples ci-dessous.

Remarque : L'échantillon d'application que vous avez téléchargé de GitHub utilise une ressource brute.

Ressource brute

Définissez une ressource brute dans /res/raw/style_json.json, contenant la déclaration de style JSON pour le style « mode nocturne » :

Ressource de type chaîne

Définissez une ressource de type chaîne dans /res/values/style_strings.xml, contenant la déclaration de style JSON pour le style « mode nocturne ». Ce didacticiel utilise le nom de chaîne style_json. Dans ce fichier, vous devez utiliser une barre oblique inversée pour échapper les points d'interrogation :

Transmettre un objet de style JSON à votre carte

Pour styliser votre carte, appelez GoogleMap.setMapStyle() en transmettant un objet MapStyleOptions contenant vos déclarations de style au format JSON.

Ressource brute

L'échantillon de code suivant part du principe que votre projet contient une ressource brute nommée style_json :

package com.example.styledmap;

import android.content.res.Resources;
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 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)));
    }
}

La disposition (activity_maps_raw.xml) ressemble à ce qui suit :

Ressource de type chaîne

L'échantillon de code suivant part du principe que votre projet contient une ressource de type chaîne nommée 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)));
    }
}

La disposition (activity_maps_string.xml) ressemble à ce qui suit :

Infos supplémentaires sur les déclarations de style JSON

Les cartes stylisées utilisent deux concepts pour appliquer des couleurs et d'autres changements de style à une carte :

  • Les sélecteurs indiquent les composants géographiques que vous pouvez styliser sur la carte. Ceux-ci incluent les routes, les parcs, les plans d'eau, etc., ainsi que leurs libellés. Les sélecteurs incluent des composants et des éléments, spécifiés en tant que propriétés featureType et elementType.
  • Les stylers sont des propriétés de couleur et de visibilité que vous pouvez appliquer aux éléments de la carte. Ils définissent la couleur affichée via une combinaison entre teinte, couleur et valeurs de luminosité/gamma.

Voir la référence de style pour une description détaillée des options de style JSON.

Google Maps APIs Styling Wizard

Utilisez l'assistant Google Maps APIs Styling Wizard pour générer rapidement des objets de style JSON. Google Maps Android API prend en charge les mêmes déclarations de style que Google Maps JavaScript API.

Étape suivante

Découvrez comment masquer des composants sur une carte à l'aide de styles.

Envoyer des commentaires concernant…

Google Maps Android API
Google Maps Android API
Besoin d'aide ? Consultez notre page d'assistance.