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 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.
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.
   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 :

Dans le même menu descendez dans la partie « Library » et liez le projet 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 7: C: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 :

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.

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”.

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

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

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 :

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);

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);

 

 

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);

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 :

 

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”.

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 GitHub : https://github.com/Infinite-Studio/tuto-android-google-maps-v2

---

[attachments style=”medium”]