Création du projet

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

activity\_maps.xml

| | |

| --- | --- |

| 1 | <?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

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 AndroidManifestde votre application :

AndroidManifest.xml

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <?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](data:image/png;base64...)

Dans le même menu descendez dans la partie « Library » et liez le projet Google Play Services :![Liaison Google Play Services](data:image/png;base64...)

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 certificatequi va nous fournir une clé au format SHA1 qui va nous servir à activer le serviceGoogle 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:\Users\your\_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

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | C:\Users\Seb\.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 monmdpet 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](data:image/jpeg;base64...)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](data:image/jpeg;base64...)

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 Keyde la partie « Public API access ».

![Générer la clé API étape 1](data:image/jpeg;base64...)

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](data:image/jpeg;base64...)

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](data:image/jpeg;base64...)

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

| | |

| --- | --- |

| 1 2 3 4 5 | <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

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 | <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"/>  <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

| | |

| --- | --- |

| 1 2 3 4 5 | <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.xmlpour y intégrer la carte Google Maps.

activity\_maps.xml

| | |

| --- | --- |

| 1 2 3 4 5 6 | <?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](data:image/png;base64...) ![Première Google Maps zoom](data:image/png;base64...)

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

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 | 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é :

| | |

| --- | --- |

| 1 | map.setMyLocationEnabled(true); |

Voici comment afficher et masquer les boutons :

| | |

| --- | --- |

| 1 2 3 | map.getUiSettings().setZoomControlsEnabled(true); map.getUiSettings().setCompassEnabled(true); map.getUiSettings().setMyLocationButtonEnabled(true); |

![Zoom Compas Position](data:image/jpeg;base64...)

Pour utiliser le zoom par programmation voici 3 fonctions utiles :

| | |

| --- | --- |

| 1 2 3 4 5 6 | // 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 :

| | |

| --- | --- |

| 1 2 3 4 5 6 7 | 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 :

| | |

| --- | --- |

| 1 2 3 4 5 | 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](data:image/jpeg;base64...) ![Map Terrain](data:image/jpeg;base64...)

![Map Satellite](data:image/jpeg;base64...) ![Map Hybrid](data:image/jpeg;base64...)

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 :

| | |

| --- | --- |

| 1 | map.setTrafficEnabled(true); |

![Trafic routier](data:image/jpeg;base64...)

Les marqueurs

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

| | |

| --- | --- |

| 1 2 3 4 5 | 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](data:image/jpeg;base64...)

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.

| | |

| --- | --- |

| 1 2 3 4 5 6 7 8 9 10 | 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 :

| | |

| --- | --- |

| 1 2 3 4 5 | 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](data:image/jpeg;base64...)

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>

Création d'une application Android intégrant Google Maps