Introduction à l’API Google Maps Android v2

Nous allons voir dans cet article comment utiliser la nouvelle API Google Maps Android v2. Tout au long de l’article vous pourrez vous référer au guide du développeur que l’on trouve à cette adresse : https://developers.google.com/maps/documentation/android/?hl=fr.

Pour commencer vérifiez dans Android SDK Manager que vous avez installé le composant suivant :

  • Google APIsAndroid SDK Manager Google APIs

Préparation des projets sous Eclipse

Nous allons créer les 2 projets nécessaires pour afficher et gérer notre carte Google Maps.

Création du projet Google Play Services

Nous allons créer 1 projet à partir de sources existantes :

  1. Google Play Services
    • chemin vers les sources : ANDROID_SDK/extras/google/google_play_services/libproject/google-play-services_lib
    • cette librairie va nous permettre d’utiliser le service Google Maps.

Pour rappel, voici comment faire pour créer ce projet sous Eclipse :

  1. Créez un nouveau projet Android en sélectionnant l’assistant Android Project from Existing Code.Android Project from Existing Code
  2. Ensuite importez le projet en spécifiant le chemin que je vous ai indiqué plus haut, ANDROID_SDK/extras/google/google_play_services/libproject/google-play-services_lib pour le projet Google Play Services.Import du projet
    Vous pouvez cocher la case Copy projects into workspace pour copier les sources du SDK dans votre workspace.

Création du projet

Créez un nouveau projet Android puis créez un layout activity_maps.xml avec ce contenu :

activity_maps.xml

<?xml version="1.0" encoding="utf-8"?>

Nous complèterons le layout plus tard.

Ensuite créez l’activité MapsActivity et copiez y le code ci-dessous :

MapsActivity.java

package fr.infinitestudio.maps;

import android.app.Activity;
import android.os.Bundle;

public class MapsActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_maps);
	}
}

Enfin déclarez votre activité dans le AndroidManifest de votre application :

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="fr.infinitestudio.maps"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">
        <activity
            android:name="fr.infinitestudio.maps.MapsActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Dans les propriétés du projet, cliquez sur le menu « Android » et cochez la case Google APIs :Librairie Google APIs

Dans le même menu descendez dans la partie « Library » et liez le projet Google Play Services :Liaison Google Play Services

Génération de la clé API Google Maps

Il nous faut maintenant générer une clé qui nous permettra d’utiliser le service Google Maps API v2. Pour ce faire on passe par le debug certificate qui va nous fournir une clé au format SHA1 qui va nous servir à activer le service Google Maps.

Récupérer la clé SHA1 depuis le « debug certificate » pour l’environnement de développement

Pour récupérer la clé il faut tout d’abord trouver le fichier debug.keystore :

  • OS X and Linux~/.android/
  • Windows Vista and Windows 7C:Usersyour_user_name.android

Une fois que cela est fait, ouvrez une fenêtre de commande sur le dossier dans lequel le fichier se trouve et lancez la commande suivante : keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android

C:UsersSeb.android>keytool -list -v -keystore debug.keystore -alias androiddebugkey -storepass android -keypass android
Nom d'alias : androiddebugkey
Date de création : 22 juil. 2012
Type d'entrée: PrivateKeyEntry
Longueur de chaîne du certificat : 1
Certificat[1]:
Propriétaire : CN=Android Debug, O=Android, C=US
Emetteur : CN=Android Debug, O=Android, C=US
Numéro de série : 5eee480c
Valide du : Sun Jul 22 19:21:45 CEST 2012 au : Tue Jul 15 19:21:45 CEST 2042
Empreintes du certificat :
MD5: 1E:CA:A4:A3:D4:E3:B8:E8:7E:B0:A0:2A:69:5A:CE:00
SHA1 : 14:0C:00:AF:3A:FB:5C:A1:E7:D2:A6:5C:F7:39:C5:7C:9E:DF:88:E3
SHA256 : B6:1E:B3:7B:01:71:7D:1F:60:92:53:0F:F3:24:E8:DF:70:9B:BA:56:5C:46:A4:AC:F5:1B:C1:5B:20:12:35:6B
Nom de l'algorithme de signature : SHA256withRSA
Version : 3

Vous devez relever la clé SHA1 que nous utiliserons plus tard dans l’article pour obtenir la clé de l’API Google Maps Android.

Attention : la clé Google Maps générée à partir de cette clé SHA1 n’est valable que pour une application qui ne va pas être publiée. Si vous voulez pouvoir publier votre application vous devrez récupérer la clé SHA1 depuis le certificat avec lequel vous allez signé votre application (release certificate).

Récupérer la clé SHA1 depuis le « release certificate » pour l’environnement de production

Pour pouvoir publier votre application, vous devez utiliser la clé stockée dans votre propre certificat. Il vous suffit de retaper la commande précédente en spécifiant le chemin vers votre certificat : keytool -list -v -keystore infinitestudio.keystore -alias monalias -storepass monmdp -keypass monmdp et récupérer la clé SHA1.

Activer l’API Google Maps Android v2

Il nous faut maintenant activer l’API. Pour ce faire rendez-vous à cette adresse : https://console.developers.google.com/project.

Cliquez alors le bouton Create Project et renseignez les informations concernant votre projet :

Création du projet
puis cliquez sur Create. Une fois le projet créé, sélectionnez le menu « APIs & auth > APIs », descendez ensuite dans la liste jusqu’à Google Maps Android v2 puis cliquez sur le bouton pour l’activer.

Activer API

Obtenir la clé API

Maintenant que le service est activé nous pouvons générer la clé API Google Maps Android. Dans le menu de gauche cliquez sur « Credentials » puis cliquez sur le bouton Create Key de la partie « Public API access ».

Générer la clé API étape 1

Une première fenêtre apparaît, cliquez sur Android key. Une nouvelle fenêtre apparaît. Dans cette fenêtre nous allons devoir renseigner la clé SHA1 générée auparavant ainsi que le nom de package du projet. Ces 2 informations doivent être séparées par un point virgule, ce qui donnera par exemple : 45:B5:E4:6F:36:AD:0A:98:94:B4:02:66:2B:12:17:F2:56:26:A0:E0;fr.infinitestudio.maps

Générer la clé API étape 2

Renseignez ces informations puis cliquez sur le bouton Create. Un nouvel encadré contenant la clé API est apparu sur la page « Credentials ».

Générer la clé API étape 3

Ajouter la clé API à notre application

Nous allons maintenant ajouter la clé à notre application. Pour cela, il suffit de rajouter une balise <meta-data> dans le manifest de l’application :

AndroidManifest.xml

<application ...>
	<meta-data
		android:name="com.google.android.maps.v2.API_KEY"
		android:value="votre_cle_google_maps"/>
</application>

 Affichage de notre première carte Google Maps

Maintenant que nous avons récupéré la clé API, nous allons pouvoir afficher une carte Google Maps.

Attention : Google Maps ne fonctionne pas avec l’émulateur il faudra donc exécuter le projet sur un véritable appareil.

Tout d’abord nous avons besoin de rajouter certaines permissions :

AndroidManifest.xml

<manifest ...>
	<uses-permission android:name="android.permission.INTERNET"/>
	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
	<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/>
	<!-- Ces 2 permissions ne sont pas requises pour utiliser l'API Google Maps Android mais sont nécessaires pour afficher le bouton de position -->
	<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
	<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>

Ensuite il nous faut rajouter le support d’OpenGL ES version 2 qui est requis par l’API Google Maps Android.

AndroidManifest.xml

<manifest ...>
	<uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>
</manifest>

Le fait de rajouter cette propriété fait que seul les périphériques dotés d’OpenGL ES version 2 pourront télécharger l’application.

Pour finir, nous allons compléter notre layout activity_maps.xml pour y intégrer la carte Google Maps.

activity_maps.xml

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
          android:id="@+id/map"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:name="com.google.android.gms.maps.MapFragment"/>

Vous devriez obtenir votre première carte Google Maps :

Première Google Maps Première Google Maps zoom

Par défaut on peut zoomer soit avec les boutons + et soit en « pinçant » et « étirant » l’écran ou en appuyant 2 fois consécutivement sur l’écran. Vous pouvez également effectuer une rotation en positionnant le pouce et l’index sur l’écran puis en effectuant une rotation.

Nous allons voir dans la partie suivante les différentes fonctionnalités qui nous sont proposées pour manipuler cette carte.

Fonctionnalités d’une carte Google Maps Android

Dans cette partie nous allons voir quelques fonctionnalités principales qui vont nous permettre de manipuler la carte.

Pour commencer il nous faut récupérer notre carte dans notre activité.

 

private GoogleMap map;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_maps);

	map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
}

Maintenant que l’on a accès à notre carte on va pouvoir agir dessus.

Zoom, compas et position

Ces 3 fonctionnalités sont activés par défaut :

  • Le zoom : vous pouvez zoomer en utilisant les boutons de contrôle ou en « pinçant / étirant » votre écran
  • Le compas : pour afficher le compas il suffit d’effectuer une rotation de la carte avec vos doigts
  • Votre position : pour afficher le bouton permettant de centrer la carte et zoomer sur votre position il suffit de rajouter cette ligne dans votre activité :
    map.setMyLocationEnabled(true);

Voici comment afficher et masquer les boutons :

map.getUiSettings().setZoomControlsEnabled(true);
map.getUiSettings().setCompassEnabled(true);
map.getUiSettings().setMyLocationButtonEnabled(true);

Zoom Compas Position

Pour utiliser le zoom par programmation voici 3 fonctions utiles :

// Zoom par incrément de 1.0
map.animateCamera(CameraUpdateFactory.zoomIn());
// Zoom par incrément de -1.0
map.animateCamera(CameraUpdateFactory.zoomOut());
// Zoom à un niveau précis
map.animateCamera(CameraUpdateFactory.zoomTo(15));

On peut également déplacer la carte automatiquement sur une position :

CameraPosition cameraPosition = new CameraPosition.Builder()
	.target(new LatLng(43.604674,1.442941)) // Position que l'on veut atteindre
	.zoom(15)             // Niveau de zoom
	.bearing(180) 	      // Orientation de la caméra, ici au sud
	.tilt(60)    	      // Inclinaison de la caméra
	.build();
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

Types de carte

5 types de carte sont disponible :

  • MAP_TYPE_NONE : affiche seulement une grille vide
  • MAP_TYPE_NORMAL : affiche les routes (c’est la carte affichée par défaut)
  • MAP_TYPE_TERRAIN : affiche la topographie du terrain
  • MAP_TYPE_SATELLITE : affiche une vue satellite
  • MAP_TYPE_HYBRID : combine la vue satellite et la vue normale

Voici comment activer les différents types de carte :

map.setMapType(GoogleMap.MAP_TYPE_NONE);
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
map.setMapType(GoogleMap.MAP_TYPE_HYBRID);

Map Normal Map Terrain

Map Satellite Map Hybrid

Trafic routier

Ce n’est pas vraiment un type de carte mais plutôt une option supplémentaire qui s’active simplement via cette instruction :

map.setTrafficEnabled(true);

Trafic routier

Les marqueurs

Pour ajouter un marqueur c’est très simple :

MarkerOptions markerOptions = new MarkerOptions();
BitmapDescriptor iconMarker = BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher);
markerOptions.position(new LatLng(43.604674,1.442941)).title("Toulouse Capitole")
	.snippet("Place du capitole située à Toulouse").icon(iconMarker).draggable(true);
map.addMarker(markerOptions);

On commence par créer un objet MarkerOptions pour lequel on ajoute certaines propriétés :

  • position : coordonnées auxquelles on veut positionner le marqueur
  • title : titre de la popup qui apparaît lorsque l’on sélectionne le marqueur
  • snippet : contenu de la popup
  • icon : icône que l’on veut afficher pour remplacer le marqueur par défaut
  • draggable : le marqueur pourra être déplacé en laissant son doigt appuyé dessus

Pour finir on ajoute simplement le marqueur à la map et voici ce que l’on obtient :

Ajout d'un marqueur

 

Les lignes

La création des lignes est tout aussi simple que le reste, par exemple nous allons créer une ligne qui part de Toulouse, qui va ensuite à New-York, passe par l’Angola, fait un détour par la Chine et s’arrête à Moscou.

private static final LatLng TOULOUSE_CAPITOLE = new LatLng(43.604674,1.442941);
private static final LatLng NEW_YORK = new LatLng(40.705891, -74.006843);
private static final LatLng ANGOLA = new LatLng(-12.428626, 17.613331);
private static final LatLng CHINE = new LatLng(39.894119, 116.415312);
private static final LatLng MOSCOU = new LatLng(55.755588, 37.618762);

map.addPolyline(new PolylineOptions()
	.add(TOULOUSE_CAPITOLE, NEW_YORK, ANGOLA, CHINE, MOSCOU)
	.width(5)
	.color(Color.BLUE));

Les propriétés d’une ligne sont définies par l’objet PolylineOptions :

  • add: toutes les coordonnées par lesquelles la ligne doit passer
  • width : l’épaisseur de la ligne
  • color : la couleur de la ligne

Il y a une propriété intéressante qui peut être rajoutée :

map.addPolyline(new PolylineOptions()
	.add(TOULOUSE_CAPITOLE, NEW_YORK, ANGOLA, CHINE, MOSCOU)
	.width(5)
	.color(Color.RED)
	.geodesic(true));

Cette propriété geodesic permet d’avoir des lignes « courbées ».

Lignes et lignes géodésiques

Conclusion

J’espère que cette introduction à l’API Google Maps Android vous a appris certaines choses et si vous avez des questions n’hésitez pas à laisser un message au bas de cet article.

Vous trouverez également les sources du projet qui reprend tout ce que l’on vient de voir ou vous pouvez directement le télécharger sur GitHubhttps://github.com/Infinite-Studio/tuto-android-google-maps-v2


[attachments style= »medium »]

Partager cet article

Commentaires (12)

  • ismaili alaoui ismail Répondre

    Bonjour
    tout d’abord je tiens a vous felicitez et remerciez pour l’enorme travail que vous avez fait .
    ma question est aussi simple que prevue 🙂 , j’aimerai savoir est ce que je peux limiter l’affichage des marker a un perimetre donnee ( exemple : afficher les marker qui sont a un rayon de 500 metre de ma position ) .
    merci

    15 avril 2015 - 11 h 51 min
  • Infinite Studio Répondre

    @ismaili-alaoui-ismail : Bonjour et merci ;). Oui effectivement tu peux limiter l’affichage des marqueurs par rapport à un périmètre donné. Je n’ai pas de code tout fait sous la main mais je te redirige vers ce tutoriel : http://wptrafficanalyzer.in/blog/adding-and-removing-multiple-proximity-alerts-in-google-maps-android-api-v2/ qui te permettra de faire ce que tu veux. Dans l’exemple on te montre comment détecter que tu entre dans une zone définie par un marqueur, donc tu peux appliquer à peu près la même chose pour détecter que les marqueurs sont à l’intérieur d’un périmètre donné autour de ta position.

    15 avril 2015 - 21 h 04 min
  • ismaili alaoui ismail Répondre

    Bonjour , merci de ton aide ,je vais voir avec le lien que tu m’a envoyee et une fois mon code fait , je te le passerai , ca serait une occasion de rajouter cette partie a ton merveilleux tuto , a plus 😉 .

    17 avril 2015 - 11 h 10 min
  • Infinite Studio Répondre

    @ismaili-alaoui-ismail Hello, oui n’hésite pas à poster ce que tu auras fait et je l’ajouterai avec plaisir.

    17 avril 2015 - 11 h 20 min
  • ismaili alaoui ismail Répondre

    Bonjour
    J’ai reussi a faire ce que je voulais faire c’est a dire afficher les markeurs avec une methode simple juste on utilisant ma position et la latitude/longitude du markeur ….laisse moi ton adresse mail pour t’exposer la methode
    a bientot

    21 avril 2015 - 17 h 27 min
  • Infinite Studio Répondre

    @ismaili-alaoui-ismail Oui tu peux me l’envoyer à cette adresse : contact at infinitestudio.fr par contre je l’intégrerai dès que j’ai un peu de temps mais c’est pas pour tout de suite 😉 en tout cas merci.

    21 avril 2015 - 20 h 22 min
  • Djihane Répondre

    Bonjour,
    @infinite-studio J’ai suivie votre tuto à la lettre, d’ailleurs, vous avez fait un excellent travaille! c’est parfaitement bien expliqué !
    mon problème c’est que je n’arrive pas à installer l’application sur mon smartphone, le fichier apk est bien généré après compliation, mais lorsque je la télécharge sur mon smartphone on me met impossible de telecharger…

    Auriez vous des suggestions à me faire? merci

    16 mai 2015 - 19 h 37 min
  • Infinite Studio Répondre

    @djihane Bonjour et merci.
    Concernant votre problème est-ce que vous arrivez déjà à uploader le fichier apk sur votre téléphone ?

    16 mai 2015 - 20 h 57 min
  • Yusuf Répondre

    Merci pour le tuto; néanmoins j ai le souci de mon côté, j ai déjà récupèré la clé et jarrive qu’à même à installer sur mon téléphone. Le bouton de zoom apparait et à gauche de mon fragment on a écrit Google, mais la carte n’apparait pas. J ai vérifié dans Log, il m écrit:

    Could not find class ‘android.app.AppOpsManager’, referenced from method com.google.android.gms.common.lt.a
    Could not find class ‘android.os.UserManager’, referenced from method com.google.android.gms.common.lt.a
    Authentication failed on the server.
    Ensure that the « Google Maps Android API v2 » is enabled.

    29 novembre 2015 - 3 h 59 min
  • Infinite Studio Répondre

    @yusuf Il faudrait vérifier si l’API Google Maps pour Android est bien activée en suivant ce lien : https://console.developers.google.com/

    29 novembre 2015 - 12 h 50 min
  • Nicolas Répondre

    Hello !
    Super travail, je débute dans le développement d’appli android et je suis justement en train de faire une appli de géolocalisation.
    Cependant, j’ai deux questions :
    – Comment faire pour que le bouton qui recentre la vue le fasse tout en zoomant sur la position avec la valeur de zoom que l’on souhaite?
    – J’ai fait en sorte que mon appli récupère les données de géolocalisation en temps réel, cependant, les valeur de longitude et de latitude ne se mettent à jour qu’à intervale de 10 secondes. Comment faire pour que ces valeurs s’update plus rapidement (<1s)?

    2 juin 2016 - 16 h 51 min
  • Hervé Répondre

    Bonjour

    Votre tutos est fantastique sauf que je n’arrive pas à afficher les marqueurs sur ma carte dans mon téléphone, et pourtant la carte s’affiche correctement.

    Bien à toi,

    17 février 2017 - 15 h 36 min

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *