Version avancée d'Android 09.1: Google Maps

1. Bienvenue

Cet atelier de programmation fait partie du cours de formation sur le développement Android avancé, développé par l'équipe de formation Google Developers. Vous tirerez pleinement parti de ce cours en suivant les ateliers de programmation dans l'ordre.

Pour en savoir plus sur le cours, consultez la présentation du cours "Développement Android avancé".

Introduction

Créer des applications avec Google Maps vous permet d'ajouter des fonctionnalités à votre application, telles que des images satellite, des commandes d'interface utilisateur robustes, le suivi de la position et des repères de position. Vous pouvez ajouter de la valeur à Google Maps standard en affichant des informations issues de votre propre ensemble de données, comme l'emplacement de zones de pêche ou d'escalade connues. Vous pouvez également créer des jeux liés au monde réel, comme Pokémon Go.

Dans cet exercice pratique, vous allez créer une application Google Maps appelée Wander.

Ce que vous devez déjà savoir

Vous devez maîtriser les éléments suivants :

  • Fonctionnalités de base de Google Maps.
  • Autorisations d'exécution.
  • Créer, compiler et exécuter des applications dans Android Studio
  • Incluez des bibliothèques externes dans votre fichier build.gradle.

Points abordés

  • Intégrez une carte Google à votre application.
  • Affichez différents types de cartes.
  • Appliquez un style à la carte Google.
  • Ajoutez des repères à votre carte.
  • Permettez à l'utilisateur de placer un repère sur un point d'intérêt.
  • Activez le suivi de la position.
  • Activez Google Street View.

Objectifs de l'atelier

  • Obtenez une clé API depuis la console Google APIs et enregistrez-la dans votre application.
  • Créez l'application Wander, qui contient une carte Google intégrée.
  • Ajoutez des fonctionnalités personnalisées à votre application, telles que des repères, des styles et le suivi de la position.
  • Activez le suivi de la position et Street View dans votre application.

2. Présentation de l'application

Dans cet atelier pratique, vous allez créer l'application Wander, qui est une carte Google stylisée. L'application Wander vous permet de placer des repères sur des lieux, de voir votre position en temps réel et de consulter des panoramas Street View.

Carte Google Maps avec styles

Google Street View dans une application Android

3. Tâche 1 : Configurer le projet et obtenir une clé API

L'API Google Maps, comme l'API Places, nécessite une clé API. Pour obtenir la clé API, enregistrez votre projet dans la console Google APIs. La clé API est associée à un certificat numérique qui relie l'application à son auteur. Pour en savoir plus sur l'utilisation des certificats numériques et la signature de votre application, consultez Signer votre application.

Dans cet exercice pratique, vous utilisez la clé API pour le certificat de débogage. Le certificat de débogage n'est pas sécurisé par conception, comme décrit dans Signer votre build de débogage. Les applications Android publiées qui utilisent l'API Google Maps nécessitent une deuxième clé API : la clé du certificat de release. Pour en savoir plus sur l'obtention d'un certificat de version, consultez Obtenir une clé API.

Android Studio inclut un modèle d'activité Google Maps qui génère un code de modèle utile. Le code du modèle inclut un fichier google_maps_api.xml contenant un lien qui simplifie l'obtention d'une clé API.

1.1 Créer le projet Wander avec le modèle Maps

  1. Créez un projet Android Studio.
  2. Nommez la nouvelle application "Wander". Acceptez les valeurs par défaut jusqu'à la page Ajouter une activité.
  3. Sélectionnez le modèle Activité Google Maps.
  4. Conservez les valeurs par défaut pour Activity Name (Nom de l'activité) et Layout Name (Nom de la mise en page).
  5. Remplacez le titre par "Wander", puis cliquez sur Terminer.

Android Studio crée plusieurs fichiers supplémentaires liés aux cartes :

google_maps_api**.xml**

Ce fichier de configuration vous permet de stocker votre clé API. Le modèle génère deux fichiers google_maps_api.xml : un pour le débogage et un pour la version finale. Le fichier de la clé API du certificat de débogage se trouve dans src/debug/res/values. Le fichier de la clé API du certificat de version se trouve dans src/release/res/values. Dans cet exercice pratique, nous n'utilisons que le certificat de débogage.

activity_maps.xml

Ce fichier de mise en page contient un seul fragment qui remplit tout l'écran. La classe SupportMapFragment est une sous-classe de la classe Fragment. Vous pouvez inclure SupportMapFragment dans un fichier de mise en page à l'aide d'une balise <fragment> dans n'importe quel ViewGroup, avec un attribut supplémentaire :

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

MapsActivity.java

Le fichier MapsActivity.java instancie la classe SupportMapFragment et utilise la méthode getMapAsync() de la classe pour préparer la carte Google. L'activité qui contient SupportMapFragment doit implémenter l'interface OnMapReadyCallback et la méthode onMapReady() de cette interface. La méthode getMapAsync() renvoie un objet GoogleMap, ce qui signifie que la carte est chargée.

1.2 Obtenir la clé API

  1. Ouvrez la version de débogage du fichier google_maps_api.xml.

Le fichier inclut un commentaire avec une longue URL. Les paramètres de l'URL incluent des informations spécifiques sur votre application.

  1. Copiez et collez l'URL dans un navigateur.
  2. Suivez les instructions pour créer un projet dans la console Google APIs. Grâce aux paramètres de l'URL fournie, la console APIs sait qu'elle doit activer automatiquement l'API Google Maps pour Android.
  3. Créez une clé API, puis cliquez sur Restreindre la clé pour limiter son utilisation aux applications Android. La clé API générée doit commencer par AIza.
  4. Dans le fichier google_maps_api.xml, collez la clé dans la chaîne google_maps_key à l'endroit où il est indiqué YOUR_KEY_HERE.
  5. Exécutez votre application. Vous disposez d'une carte intégrée à votre activité, avec un repère défini à Sydney, en Australie. (Le repère de Sydney fait partie du modèle. Vous le modifierez plus tard.)

4. Tâche 2 : Ajouter des types de cartes et des repères

Google Maps inclut plusieurs types de cartes : normal, hybride, satellite, relief et "aucun". Dans cette tâche, vous allez ajouter une barre d'application avec un menu d'options qui permet à l'utilisateur de modifier le type de carte. Vous déplacez le point de départ de la carte vers l'emplacement de votre domicile. Vous ajoutez ensuite la prise en charge des repères, qui indiquent des emplacements uniques sur une carte et peuvent inclure un libellé.

2.1 Ajouter des types de cartes

Le type de carte que votre utilisateur souhaite dépend du type d'informations dont il a besoin. Lorsque vous utilisez des cartes pour la navigation dans votre voiture, il est utile de voir clairement les noms des rues. Lorsque vous faites de la randonnée, vous vous souciez probablement davantage de la distance qu'il vous reste à parcourir pour atteindre le sommet de la montagne. Dans cette étape, vous allez ajouter une barre d'application avec un menu d'options qui permet à l'utilisateur de modifier le type de carte.

  1. Pour créer un fichier XML de menu, effectuez un clic droit sur votre répertoire res, puis sélectionnez New > Android Resource File (Nouveau > Fichier de ressources Android).
  2. Dans la boîte de dialogue, nommez le fichier map_options. Sélectionnez Menu pour le type de ressource. Cliquez sur OK.
  3. Remplacez le code du nouveau fichier par le code suivant pour créer les options de la carte. Le type de carte "none" (aucun) est omis, car il n'affiche aucune carte.
<?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. Créez des ressources de chaîne pour les attributs title.
  2. Dans le fichier MapsActivity, modifiez la classe pour qu'elle étende la classe AppCompatActivity au lieu d'étendre la classe FragmentActivity. L'utilisation de AppCompatActivity affichera la barre d'application et donc le menu.
  3. Dans MapsActivity, remplacez la méthode onCreateOptionsMenu() et développez le fichier map_options :
@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}
  1. Pour modifier le type de carte, utilisez la méthode setMapType() sur l'objet GoogleMap en transmettant l'une des constantes de type de carte.

Remplacez la méthode onOptionsItemSelected(). Collez le code suivant pour modifier le type de carte lorsque l'utilisateur sélectionne l'une des options du 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. Exécutez l'application. Utilisez le menu de la barre d'application pour modifier le type de carte. Notez comment l'apparence de la carte change.

2.2 Déplacer l'emplacement de la carte par défaut

Par défaut, le rappel onMapReady() inclut du code qui place un repère à Sydney, en Australie, où Google Maps a été créé. Le rappel par défaut anime également la carte pour la faire défiler jusqu'à Sydney. Dans cette étape, vous allez faire défiler la carte jusqu'à l'emplacement de votre maison sans placer de repère, puis effectuer un zoom au niveau que vous spécifiez.

  1. Dans la méthode onMapReady(), supprimez le code qui place le repère à Sydney et déplace la caméra.
  2. Accédez à www.google.com/maps dans votre navigateur et recherchez votre domicile.
  3. Effectuez un clic droit sur le lieu, puis sélectionnez Plus d'infos sur cet endroit.

Une petite fenêtre s'affiche en bas de l'écran et contient des informations sur la position, y compris la latitude et la longitude.

  1. Créez un objet LatLng appelé home. Dans l'objet LatLng, utilisez les coordonnées que vous avez trouvées dans Google Maps dans le navigateur.
  2. Créez une variable float appelée zoom et définissez-la sur le niveau de zoom initial souhaité. La liste suivante vous donne une idée du niveau de détail affiché à chaque niveau de zoom :
  • 1 : Monde
  • 5 : Masse continentale/Continent
  • 10 : Ville
  • 15 : rues
  • 20 : Bâtiments
  1. Créez un objet CameraUpdate à l'aide de CameraUpdateFactory.newLatLngZoom(), en transmettant votre objet LatLng et votre variable zoom. Faites un panoramique et zoomez avec la caméra en appelant moveCamera() sur l'objet GoogleMap, en transmettant le nouvel objet CameraUpdate :
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));
  1. Exécutez l'application. La carte doit se déplacer jusqu'à votre domicile et zoomer au niveau souhaité.

2.3 Ajouter des repères sur la carte

Google Maps peut identifier un lieu à l'aide d'un repère, que vous créez à l'aide de la classe Marker. Le repère par défaut utilise l'icône Google Maps standard : Repère Google Maps

Vous pouvez étendre les repères pour afficher des informations contextuelles dans des fenêtres d'informations.

Lors de cette étape, vous allez ajouter un repère lorsque l'utilisateur appuie de manière prolongée sur un lieu de la carte. Vous ajoutez ensuite un InfoWindow qui affiche les coordonnées du repère lorsque l'utilisateur appuie dessus.

Fenêtre d&#39;informations pour un repère déposé

  1. Créez un bouchon de méthode dans MapsActivity appelé setMapLongClick() qui reçoit un GoogleMap final comme argument et renvoie void :
private void setMapLongClick(final GoogleMap map) {}
  1. Utilisez la méthode setOnMapLongClickListener() de l'objet GoogleMap pour placer un repère à l'endroit où l'utilisateur appuie de manière prolongée. Transmettez une nouvelle instance de OnMapLongClickListener qui remplace la méthode onMapLongClick(). L'argument entrant est un objet LatLng qui contient les coordonnées de l'emplacement sur lequel l'utilisateur a appuyé :
private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}
  1. Dans onMapLongClick(), appelez la méthode addMarker(). Transmettez un nouvel objet MarkerOptions avec la position définie sur le LatLng transmis :
map.addMarker(new MarkerOptions().position(latLng));
  1. Appelez setMapLongClick() à la fin de la méthode onMapReady(). Transmettez mMap.
  2. Exécutez l'application. Appuyez de manière prolongée sur la carte pour placer un repère à un emplacement.
  3. Appuyez sur le repère pour le centrer sur l'écran.

Des boutons de navigation s'affichent en bas à gauche de l'écran, ce qui permet à l'utilisateur d'utiliser l'application Google Maps pour accéder à la position marquée.

Pour ajouter une fenêtre d'informations au repère :

  1. Dans l'objet MarkerOptions, définissez les champs title et snippet.
  2. Dans onMapLongClick(), définissez le champ title sur "Repère déposé". Définissez le champ snippet sur les coordonnées de l'emplacement dans la méthode 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. Exécutez l'application. Appuyez de manière prolongée sur la carte pour placer un repère de localisation. Appuyez sur le repère pour afficher la fenêtre d'informations.

2.4 Ajouter un écouteur de POI

Par défaut, les points d'intérêt (POI) s'affichent sur la carte avec les icônes correspondantes. Les POI incluent les parcs, les écoles, les bâtiments administratifs, etc. Lorsque le type de carte est défini sur normal, les POI commerciaux s'affichent également sur la carte. Ces POI représentent des établissements tels que des magasins, des restaurants et des hôtels.

Au cours de cette étape, vous allez ajouter un GoogleMap.OnPoiClickListener à la carte. Cet écouteur de clic place immédiatement un repère sur la carte, au lieu d'attendre un appui prolongé. L'écouteur de clics affiche également la fenêtre d'informations contenant le nom du point d'intérêt.

Repère de point d&#39;intérêt

  1. Créez un bouchon de méthode dans MapsActivity appelé setPoiClick() qui reçoit un GoogleMap final comme argument et renvoie void :
private void setPoiClick(final GoogleMap map) {}
  1. Dans la méthode setPoiClick(), définissez un OnPoiClickListener sur le GoogleMap transmis :
map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});
  1. Dans la méthode onPoiClick(), placez un repère à l'emplacement du point d'intérêt. Définissez le titre sur le nom du point d'intérêt. Enregistrez le résultat dans une variable appelée poiMarker.
public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}
  1. Appelez showInfoWindow() sur poiMarker pour afficher immédiatement la fenêtre d'informations.
poiMarker.showInfoWindow();
  1. Appelez setPoiClick() à la fin de onMapReady(). Transmettez mMap.
  2. Exécutez votre application et trouvez un point d'intérêt, comme un parc. Appuyez sur le point d'intérêt pour y placer un repère et afficher son nom dans une fenêtre d'informations.

5. Tâche 3 : Appliquer un style à la carte

Vous pouvez personnaliser Google Maps de nombreuses façons pour donner à votre carte une apparence unique.

Vous pouvez personnaliser un objet MapFragment à l'aide des attributs XML disponibles, comme vous le feriez pour n'importe quel autre fragment. Toutefois, au cours de cette étape, vous allez personnaliser l'apparence du contenu de MapFragment à l'aide des méthodes de l'objet GoogleMap. Vous utilisez l'assistant de style en ligne pour ajouter un style à votre carte et personnaliser vos repères. Vous ajoutez également un GroundOverlay à la position de votre domicile, qui est mis à l'échelle et pivote avec la carte.

3.1 Ajouter un style à votre carte

Pour créer un style personnalisé pour votre carte, générez un fichier JSON qui spécifie la façon dont les éléments de la carte sont affichés.Vous n'avez pas besoin de créer ce fichier JSON manuellement : Google fournit l'assistant de style, qui génère le fichier JSON pour vous après que vous avez défini le style visuel de votre carte. Dans cet exercice pratique, vous allez appliquer un style à la carte pour le "mode Nuit", ce qui signifie que la carte utilise des couleurs sombres et un faible contraste pour une utilisation de nuit.

  1. Accédez à https://mapstyle.withgoogle.com/ dans votre navigateur.
  2. Sélectionnez Créer un style.
  3. Sélectionnez le thème Nuit.
  4. Cliquez sur Plus d'options en bas du menu.
  5. En bas de la liste Type d'élément, sélectionnez Eau > Remplissage. Remplacez la couleur de l'eau par un bleu foncé (par exemple, #160064).
  6. Cliquez sur Terminer. Copiez le code JSON dans la fenêtre pop-up qui s'affiche.
  7. Dans Android Studio, créez un répertoire de ressources appelé raw dans le répertoire res. Créez un fichier nommé map_style.json dans res/raw.
  8. Collez le code JSON dans le nouveau fichier de ressources.
  9. Pour définir le style JSON sur la carte, appelez setMapStyle() sur l'objet GoogleMap. Transmettez un objet MapStyleOptions, qui charge le fichier JSON. La méthode setMapStyle() renvoie une valeur booléenne indiquant si le style a été appliqué. Si le fichier ne peut pas être chargé, la méthode génère une Resources.NotFoundException.

Copiez le code suivant dans la méthode onMapReady() pour styliser la carte. Vous devrez peut-être créer une chaîne TAG pour vos instructions de journal :

     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. Exécutez votre application. Le nouveau style devrait être visible lorsque la carte est en mode normal.

Carte Google en mode Nuit

3.2 Personnaliser votre repère

Vous pouvez personnaliser davantage votre carte en stylisant les repères. Dans cette étape, vous allez modifier les repères rouges par défaut pour qu'ils correspondent au jeu de couleurs du mode Nuit.

  1. Dans la méthode onMapLongClick(), ajoutez la ligne de code suivante au constructeur MarkerOptions() pour utiliser le repère par défaut, mais en changeant la couleur en bleu :
.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))
  1. Exécutez l'application. Les repères que vous placez sont désormais bleus, ce qui est plus cohérent avec le thème du mode Nuit de l'application.

Notez que les repères de POI sont toujours rouges, car vous n'avez pas ajouté de style à la méthode onPoiClick().

3.3 Ajouter une superposition

Pour personnaliser la carte Google, vous pouvez dessiner dessus. Cette technique est utile si vous souhaitez mettre en avant un type de lieu particulier, comme les lieux de pêche prisés. Trois types de superpositions sont acceptés :

  • Formes : vous pouvez ajouter des polylignes, des polygones et des cercles à la carte.
  • Objets TileOverlay : une superposition de tuiles définit un ensemble d'images qui sont ajoutées au-dessus des tuiles de la carte de base. Les superpositions de tuiles sont utiles si vous souhaitez ajouter un grand nombre d'images à la carte. Une superposition de tuiles classique couvre une vaste zone géographique.
  • Objets GroundOverlay : une superposition au sol est une image fixée sur une carte. Contrairement aux repères, les superpositions au sol sont orientées vers la surface de la Terre plutôt que vers l'écran. Une rotation, une inclinaison ou un zoom sur la carte modifient l'orientation de l'image. Les superpositions au sol sont utiles lorsque vous souhaitez corriger une seule image sur une zone de la carte.

Dans cette étape, vous allez ajouter une superposition au sol en forme d'Android à votre position de départ.

  1. Téléchargez cette image Android et enregistrez-la dans votre dossier res/drawable.
  2. Dans onMapReady(), après l'appel pour déplacer la caméra vers la position initiale, créez un objet GroundOverlayOptions. Attribuez l'objet à une variable appelée homeOverlay :
GroundOverlayOptions homeOverlay = new GroundOverlayOptions();
  1. Utilisez la méthode BitmapDescriptorFactory.fromResource() pour créer un objet BitmapDescriptor à partir de l'image ci-dessus. Transmettez l'objet à la méthode image() de l'objet GroundOverlayOptions :
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));
  1. Définissez la propriété position pour l'objet GroundOverlayOptions en appelant la méthode position(). Transmettez l'objet LatLng home et un float pour la largeur en mètres de l'incrustation souhaitée. Pour cet exemple, une largeur de 100 mètres convient :
GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);
  1. Appelez addGroundOverlay() sur l'objet GoogleMap. Transmettez votre objet GroundOverlayOptions :
mMap.addGroundOverlay(homeOverlay);
  1. Exécutez l'application. Zoomez sur votre position de départ. L'image Android s'affiche en superposition.

6. Tâche 4 : Activer le suivi de la position et Street View

Les utilisateurs utilisent souvent Google Maps pour voir leur position actuelle. Vous pouvez obtenir la position de l'appareil à l'aide de l'API Location Services. Pour afficher la position de l'appareil sur votre carte sans utiliser davantage de données Location, vous pouvez utiliser la couche de données de localisation.

Le calque de données de localisation ajoute un bouton Ma position en haut à droite de la carte. Lorsque l'utilisateur appuie sur le bouton, la carte se centre sur la position de l'appareil. Cette position est indiquée par un point bleu si l'appareil est fixe, ou sous forme de chevron bleu si l'appareil est en mouvement.

Carte Google stylisée avec suivi de la position

Vous pouvez fournir des informations supplémentaires sur un lieu à l'aide de Google Street View, qui est une photo panoramique navigable d'un lieu donné.

Dans cette tâche, vous allez activer le calque de données de localisation et Street View. Ainsi, lorsque l'utilisateur appuiera sur la fenêtre d'informations du repère de point d'intérêt, la carte passera en mode Street View.

4.1 Activer le suivi de la position

L'activation du suivi de la position dans Google Maps ne nécessite qu'une seule ligne de code. Toutefois, vous devez vous assurer que l'utilisateur a accordé les autorisations de localisation (à l'aide du modèle d'autorisation d'exécution).

Dans cette étape, vous demandez l'autorisation d'accéder à la position et activez le suivi de la position.

  1. Dans le fichier AndroidManifest.xml, vérifiez que l'autorisation FINE_LOCATION est déjà présente. Android Studio a inséré cette autorisation lorsque vous avez sélectionné le modèle Google Maps.
  2. Pour activer le suivi de la position dans votre application, créez une méthode dans MapsActivity appelée enableMyLocation(), qui ne prend aucun argument et ne renvoie rien.
  3. Définissez la méthode enableMyLocation(). Vérifiez que vous disposez de l'autorisation ACCESS_FINE_LOCATION. Si l'autorisation est accordée, activez le calque de localisation. Sinon, demandez l'autorisation :
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. Appelez enableMyLocation() à partir du rappel onMapReady() pour activer le calque de localisation.
  2. Remplacez la méthode onRequestPermissionsResult(). Si l'autorisation est accordée, appelez 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. Exécutez l'application. Le bouton Ma position s'affiche en haut à droite et indique la position actuelle de l'appareil.

4.2 Activer Street View

Google Maps propose Street View, une vue panoramique d'un lieu avec des commandes permettant de naviguer le long d'un chemin désigné. Street View n'est pas disponible dans le monde entier.

Dans cette étape, vous allez activer un panorama Street View qui se déclenche lorsque l'utilisateur appuie sur la fenêtre d'informations d'un point d'intérêt. Vous devez effectuer deux opérations :

  1. Distinguez les repères de POI des autres repères, car vous souhaitez que la fonctionnalité de votre application ne fonctionne que sur les repères de POI. Vous pouvez ainsi lancer Street View lorsque l'utilisateur appuie sur une fenêtre d'informations de POI, mais pas lorsqu'il appuie sur un autre type de repère.

La classe Marker inclut une méthode setTag() qui vous permet d'associer des données. (Les données peuvent être n'importe quoi qui s'étend à partir de Object.) Vous définirez un tag sur les repères créés lorsque les utilisateurs cliqueront sur des POI.

  1. Lorsque l'utilisateur appuie sur une fenêtre d'informations taguée dans un OnInfoWindowClickListener, remplacez MapFragment par StreetViewPanoramaFragment. (Le code ci-dessous utilise SupportMapFragment et SupportStreetViewPanoramaFragment pour prendre en charge les versions d'Android antérieures à l'API 12.)

Si l'un des fragments change au moment de l'exécution, vous devez l'ajouter dans la classe Activity qui le contient, et non de manière statique dans le fichier XML.

Ajouter un tag au repère de POI

  1. Dans le rappel onPoiClick(), appelez setTag() sur poiMarker. Transmettez n'importe quelle chaîne arbitraire :
poiMarker.setTag("poi");

Remplacer le SupportMapFragment statique par une instance d'exécution

  1. Ouvrez activity_maps.xml et remplacez l'élément par une mise en page FrameLayout qui servira de conteneur pour vos fragments :
<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. Dans onCreate() dans MapsActivity, supprimez le code qui trouve le SupportMapFragment par ID, car il n'y a plus de SupportMapFragment statique dans le fichier XML. Créez plutôt une instance d'exécution de SupportMapFragment en appelant SupportMapFragment.newInstance() :
SupportMapFragment mapFragment = SupportMapFragment.newInstance();
  1. Ajoutez le fragment au FrameLayout à l'aide d'une transaction de fragment avec le FragmentManager :
getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();
  1. Conservez la ligne de code qui déclenche le chargement asynchrone de la carte :
mapFragment.getMapAsync(this);

Définir un OnInfoWindowClickListener et vérifier le tag du repère

  1. Créez un stub de méthode dans MapsActivity appelé setInfoWindowClickToPanorama() qui prend un GoogleMap comme argument et renvoie void :
private void setInfoWindowClickToPanorama(GoogleMap map) {}
  1. Définissez un OnInfoWindowClickListener sur GoogleMap :
map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });
  1. Dans la méthode onInfoWindowClick(), vérifiez si le repère contient le tag de chaîne que vous avez défini dans la méthode onPoiClick() :
if (marker.getTag() == "poi") {}

Remplacer SupportMapFragment par SupportStreetViewPanoramaFragment

  1. Si le repère contient le tag, spécifiez l'emplacement du panorama Street View à l'aide d'un objet StreetViewPanoramaOptions. Définissez la propriété position de l'objet sur la position du repère transmis :
StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());
  1. Créez une instance de SupportStreetViewPanoramaFragment en transmettant l'objet options que vous avez créé :
SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);
  1. Démarrez une transaction de fragment. Remplacez le contenu du conteneur de fragment par le nouveau fragment, streetViewFragment. Ajoutez la transaction à la pile "Retour" afin que l'utilisateur soit redirigé vers SupportMapFragment lorsqu'il appuie sur "Retour", et non qu'il quitte l'application :
getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();
  1. Appelez setInfoWindowClickToPanorama(mMap) dans onMapReady() après l'appel de setPoiClick()..
  2. Exécutez l'application. Zoomez sur une ville disposant d'une couverture Street View, comme Mountain View (où se trouve le siège de Google), et trouvez un point d'intérêt, comme un parc. Appuyez sur le point d'intérêt pour placer un repère et afficher la fenêtre d'informations. Appuyez sur la fenêtre d'informations pour passer en mode Street View pour l'emplacement du repère. Appuyez sur le bouton Retour pour revenir au fragment de carte.

Google Street View dans une application Android

7. Code de solution

Code de solution Wander

8. Défi de codage

Problème : Si vous appuyez sur la fenêtre d'informations d'un point d'intérêt dans une zone non couverte par Street View, un écran noir s'affiche.

9. Résumé

  • Pour utiliser l'API Maps, vous avez besoin d'une clé API provenant de la console Google APIs.
  • Dans Android Studio, l'utilisation du modèle d'activité Google Maps génère un Activity avec un seul SupportMapFragment dans la mise en page de l'application. Le modèle ajoute également ACCESS_FINE_PERMISSION au fichier manifeste de l'application, implémente OnMapReadyCallback dans votre activité et remplace la méthode onMapReady() requise.

Pour modifier le type de carte d'un GoogleMap au moment de l'exécution, utilisez la méthode GoogleMap.setMapType(). Une carte Google peut être l'un des types de cartes suivants :

  • Normale : carte routière classique. Affiche les routes, certains ouvrages construits par l'homme et les éléments naturels importants comme les rivières. Les libellés des routes et des éléments géographiques sont également visibles.
  • Mixte : données de photographies satellite avec l'ajout de cartes routières. Les libellés des routes et des éléments géographiques sont également visibles.
  • Satellite : données photographiques. Les libellés des cartes et des éléments géographiques ne sont pas visibles.
  • Relief : données topographiques. La carte inclut des couleurs, des lignes de contour, des libellés et des ombres pour la perspective. Certaines routes et certains libellés sont également visibles.
  • Aucune : aucune carte.

À propos de Google Maps :

  • Un repère est un indicateur pour un emplacement géographique spécifique.
  • Lorsque l'utilisateur appuie sur le repère, le comportement par défaut est d'afficher une fenêtre d'informations sur le lieu.
  • Par défaut, les points d'intérêt (POI) sont affichés sur la carte de base avec les icônes qui leur correspond. Les POI incluent les parcs, les écoles, les bâtiments administratifs, etc.
  • De plus, les POI commerciaux (magasins, restaurants, hôtels, etc.) s'affichent par défaut sur la carte lorsque le type de carte est défini sur normal.
  • Vous pouvez capturer les clics sur les POI à l'aide de OnPoiClickListener.
  • Vous pouvez modifier l'apparence visuelle de presque tous les éléments d'une carte Google à l'aide de l'assistant de style. L'assistant de style génère un fichier JSON que vous transmettez à Google Maps à l'aide de la méthode setMapStyle().
  • Vous pouvez personnaliser vos repères en changeant la couleur par défaut ou en remplaçant l'icône par défaut par une image personnalisée.

Autres informations importantes :

  • Utilisez une superposition au sol pour fixer une image à un emplacement géographique.
  • Utilisez un objet GroundOverlayOptions pour spécifier l'image, sa taille en mètres et sa position. Transmettez cet objet à la méthode GoogleMap.addGroundOverlay() pour définir la superposition sur la carte.
  • À condition que votre application dispose de l'autorisation ACCESS_FINE_LOCATION, vous pouvez activer le suivi de la position à l'aide de la méthode mMap.setMyLocationEnabled(true).
  • Google Street View offre des vues panoramiques à 360 degrés à partir des routes sélectionnées dans sa zone de couverture.
  • Utilisez la méthode StreetViewPanoramaFragment.newInstance() pour créer un fragment Street View.
  • Pour spécifier les options de la vue, utilisez un objet StreetViewPanoramaOptions. Transmettez l'objet à la méthode newInstance().

10. En savoir plus

La documentation sur les concepts associés se trouve dans 9.1 : API Google Maps.

Documentation pour les développeurs Android :

Documentation de référence :

11. Devoirs

Cette section répertorie les devoirs possibles pour les élèves qui suivent cet atelier de programmation dans le cadre d'un cours animé par un enseignant. Il revient à l'enseignant d'effectuer les opérations suivantes :

  • Attribuer des devoirs si nécessaire
  • Indiquer aux élèves comment rendre leurs devoirs
  • Noter les devoirs

Les enseignants peuvent utiliser ces suggestions autant qu'ils le souhaitent, et ne doivent pas hésiter à attribuer d'autres devoirs aux élèves s'ils le jugent nécessaire.

Si vous suivez cet atelier de programmation par vous-même, n'hésitez pas à utiliser ces devoirs pour tester vos connaissances.

Créer et exécuter une application

  1. Créez une application qui utilise le modèle d'activité Google Maps, qui charge Google Maps au lancement de l'application.
  2. Une fois la carte Google chargée, déplacez la caméra sur l'emplacement de votre établissement scolaire, de votre domicile ou de tout autre lieu qui a du sens pour vous.
  3. Ajoutez deux repères à la carte : un pour l'emplacement de votre établissement et un pour votre domicile ou un autre lieu important.
  4. Personnalisez les icônes de repère en modifiant la couleur par défaut ou en remplaçant l'icône par défaut par une image personnalisée.

Conseil : Consultez la documentation onMapReady (GoogleMap googleMap).

Répondre aux questions suivantes

Question 1

Quelle méthode est appelée lorsque la carte est chargée et prête à être utilisée dans l'application ?

Question 2

Quels composants Android pouvez-vous utiliser pour inclure Google Maps dans votre application ?

  • MapView et MapFragment
  • MapFragment et MapActivity
  • MapView et MapActivity
  • MapFragment seulement

Question 3

Quels types de cartes l'API Google Maps pour Android propose-t-elle ?

  • Normal, hybride, relief, satellite et carte routière
  • "Normal", "Hybride", "Relief", "Satellite" et "Aucun"
  • Hybride, relief, satellite, carte routière et "aucune"
  • "normal", "terrain", "satellite", "imagemap" et "none"

Question 4

Quelle interface implémentez-vous pour ajouter une fonctionnalité de clic à un point d'intérêt (POI) ?

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

Envoyer votre application pour qu'elle soit notée

Conseils pour les notations

Vérifiez que l'application dispose des fonctionnalités suivantes :

  • Lorsque l'application est lancée, la carte Google s'affiche correctement, ce qui indique qu'une clé API a été générée correctement.
  • Une fois Google Maps chargé, la caméra se déplace vers le domicile ou l'établissement scolaire de l'élève. Dans le code, cette étape doit avoir lieu dans la méthode de rappel onMapReady (GoogleMap googleMap).
  • Des repères sont affichés à l'emplacement de l'établissement de l'élève et à un autre emplacement, comme son domicile.
  • Les deux repères sont personnalisés. Par exemple, les repères utilisent une couleur autre que le rouge par défaut ou une icône personnalisée.

12. Atelier de programmation suivant

Pour voir tous les ateliers de programmation du cours de formation "Développement Android avancé", accédez à la page de destination des ateliers de programmation pour le développement Android avancé.