Intégration d’une Google Map sous Android

Dans ce nouveau tutoriel, nous allons aborder un thème très important dans la programmation Android, c’est-à-dire intégrer une google map dans votre application Android.

Récupération de votre clé Google Map

Afin de pouvoir utiliser Google map dans votre application, il vous faut une clé API. Voici les étapes pour obtenir cette dernière :

Génération du MD5

La première étape pour l’obtention de la clé API, c’est de créer votre md5 checksum. Il est crée grâce au debug certificate.
On a besoin de ce md5, car il faut que la google map de l’application soit signée et la clé API sert à ça.

Pour créer votre md5, il faut trouver où se situe votre fichier debug.keystore. En général, il se trouve dans les emplacements suivants :

• Windows Seven : C:\Users\xxxx\.android\debug.keystore
• Windows Vista: C:\Users\xxxx\AppData\Local\Android\debug.keystore
• Windows XP: C:\Documents and Settings\xxxx\Android\debug.keystore
• Mac, Linux: ~/.android/debug.keystore
• xxx : Correspond à votre nom d’utilisateur.
• Si vous utilisez Eclipse, vous pouvez obtenir le chemin de la façon suivante « windows > Prefs > Android > Build ».

Une fois le chemin connu, il faut lancer une console windows (Démarrer -> Exécuter puis taper cmd). Puis dans la console, taper la commande suivante :

keytool -list -alias androiddebugkey -keystore <chemin_vers_le_fichier_debug>.keystore -storepass android -keypass android

Génération de votre clé API

Il suffit maintenant de vous rendre sur : http://code.google.com/intl/fr/android/maps-api-signup.html
Vous devez par contre disposer d’un compte Google.

Pour pouvoir générer votre clé, il vous suffit d’accepter les termes et saisir le md5 obtenu au dessus.

La clé obtenue correspond à l’instance de votre ordinateur, si vous changer d’ordinateur, il faudra générer une autre clé.

Garder la clé que vous avez obtenu dans un coin ou un fichier, on verra son utilisation plus tard.

Intégration d’une Google Map

Pour commencer, on crée un projet Android avec les attributs suivants :

• Nom du projet : HelloGoogleMap.
• Choix du SDK : La version que vous souhaitez mais vous devez obligatoirement prendre la version Google APi (Dans mon exemple, je prendrai Google APIs 2.2).
• Nom de l’application : GoogleMapTuto
• Nom du package : com.android.map
• Création d’une activité : HelloGoogleMapActivity

Création de la vue Google map

Dans le fichier « main.xml » qui représente votre vue principale de l’application, recopiez le code suivant pour l’intégration d’une google map

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?xml version="1.0" encoding="utf-8"?> <LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  > <com.google.android.maps.MapView  android:id="@+id/mapView"  android:layout_width="fill_parent"  android:layout_height="fill_parent"  android:enabled="true"  android:clickable="true"  android:apiKey="@string/mapKey"  /> </LinearLayout>

Pour intégrer une google map dans votre vue, il suffit simplement de rajouter l’élément “com.google.android.maps.MapView”. Voici une petite explication de ses attributs :

• android:id : Identifiant de la google map.
• android:layout_width et android:layout_height : Largeur et Hauteur de la google Map.
• android:clickable : Permet à l’utilisateur de pouvoir cliquer sur la google map.
• android:mapKey : A cet emplacement, vous allez mettre la clé google map que vous avez obtenu dans l’étape précédente (Pour ma part, je la stock dans le fichierstrings.xml« ).

Création de l’activité principale

Dans notre activité principale, HelloGoogleMapActivity.java, copiez le code suivant :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

package com.android.map; import android.os.Bundle; import com.google.android.maps.MapActivity; public class HelloGoogleMapActivity extends MapActivity {  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.main);  }  @Override  protected boolean isRouteDisplayed()  {    return false;  } }

Voici quelques explications sur cette activité

• Une activité google map n’hérite pas d’Activity comme les autres activités mais deMapActivity.
• La méthode IsRouteDisplayed sert à savoir si vous affichez des informations sur votre réseaux ou pas. Vous devez la surcharger car vous implementez MapActivity.
• Pour le reste ça reste du classique.

Pour pouvoir utiliser la google map, il faut aussi modifier le fichier AndroidManifest.xmlpour rajouter la partie suivante dans la balise application (cette ligne sert à dire qu’on utilise la bibliothéque GoogleMap):

1	<uses-library android:name="com.google.android.maps" />

Ce qui donne :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"  package="com.android.map"  android:versionCode="1"  android:versionName="1.0">    <application android:icon="@drawable/icon" android:label="@string/app_name">        <uses-library android:name="com.google.android.maps" />        <activity android:name=".HelloGoogleMapActivity"                      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>   <uses-permission android:name="android.permission.INTERNET" /> </manifest>

Donc voici à quoi ressemble les autres fichiers :

• strings.xml

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <resources>      <string name="hello">Hello World, HelloGoogleMapActivity!</string>      <string name="app_name">GoogleMapTuto</string>      <string name="mapKey">XxxxxxxxxxxxxxxxxxxxxxxxxX</string> </resources>

Une fois tout cela fait, compiler votre projet et voici votre premier résultat (le positionnement de la carte est facultatif et n’a pas d’importance pour l’instant) :

Gestion du zoom

1 – Bouton de zoom

Pour gérer le cas d’un smartphone qui n’est pas multitouche nous allons rajouter des boutons de zoom. Pour cela, il suffit d’utiliser la méthode setBuiltInZoomControls comme ci-dessous :

• Dans le fichier de déclaration de vue main.xml, il faut rajouter après la déclaration de la google Map:

1 2 3 4 5 6

<LinearLayout android:id="@+id/zoom" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" />

• Dans la méthode OnCreate, à la suite du setContentView on rajoute :

1 2	mapView = (MapView) this.findViewById(R.id.mapView); mapView.setBuiltInZoomControls(true);

Sans oublier de déclarer la variable mapView dans les attributs de la classe :

1	private MapView    mapView;

Voila en quelques lignes on obtient :

2 – Niveau de zoom

Si vous trouvez que votre carte est trop zoomer ou pas assez à l’initialisation, vous pouvez changer le niveau de zoom grâce à la méthode setZoom. Par exemple :

1 2 3 4

private MapController mc; //Reste du code mc = mapView.getController(); mc.setZoom(17);

La valeur de la méthode setZoom, peut être comprise entre 1 et 21 ou 21 est le zoom maximum.

Modifier le type de la carte

Comme sur la vraie google Map de votre ordinateur, vous pouvez afficher une vision satellite de la google map pour cela, il suffit d’utiliser la méthode setSatellite.

Dans notre exemple, on va faire en sorte qu’au moment où l’utilisateur appuie sur le bouton S du clavier , la vision satellite s’active et se désactive.

Pour cela on doit surcharger la méthode onKeyDown. Ce qui donne :

1 2 3 4 5 6 7 8 9 10

@Override public boolean onKeyDown(int keyCode, KeyEvent event) {   if (keyCode == KeyEvent.KEYCODE_S)   {     mapView.setSatellite(!mapView.isSatellite());     return true;   }   return super.onKeyDown(keyCode, event); }

et on obtiens le résultat suivant :

Conclusion

Voilà, ce tutoriel s’arrête ici. J’espère qu’il vous a aidé à comprendre comment intégrer une google map dans votre application Android. Je mets à votre disposition le code source du projet ici. Un autre tutoriel arrivera très bientôt et abordera des facettes plus avancées de ce sujet(géocalisation, positionnement d’un marqueur sur la carte).