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.

Pré-requis

Afin de comprendre toutes les étapes de ce tutoriel, il est nécessaire d’avoir fait les deux précédents tutoriaux android sur ce blog

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

  • Si vous obtenez l’erreur “keytool : command not found”, il faut exécuter la commande depuis le répertoire ou se trouve le binaire keytool (dossier bin de votre jdk)
  • Si vous utilisez une autre clé que celle par défaut (debug.keystore), spécifier cette clé dans la commande (au lieu de la clé par défaut) avec les informations correspondantes (alias, password …).

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 la clé de debug ou de signature utilisée. Si vous changer d’ordinateur, il faudra générer une autre clé (sauf si vous gardez la même 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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:apiKey="@string/mapKey"
        android:clickable="true"
     />

</RelativeLayout>

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 spécifier la clé google map que vous avez obtenue dans l’étape précédente (Pour ma part, je la stock dans le fichier strings.xml“).

Création de l’activité principale

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

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 :

  • Une activité google map n’hérite pas d’Activity mais de MapActivity.
  • La méthode IsRouteDisplayed sert à indiquer si votre application affiche des itinéraires (utilisé pour la navigation). 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.xml pour indique qu’on utilise la bibliothèque Google Map. (Cette indication rend votre application indisponible pour les appareils ne possédant cette bibliothèque):

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

Sans oublier la permission internet (indispensable pour afficher les cartes)

<uses-permission android:name="android.permission.INTERNET" />

Ce qui donnera :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.map"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

     <uses-permission android:name="android.permission.INTERNET" />
    
    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        
        <uses-library android:name="com.google.android.maps" />
        
        <activity
            android:name=".HelloGoogleMapActivity"
            android:label="@string/title_activity_hello_google_map" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>

Donc voici à quoi ressemble les autres fichiers :

  • strings.xml
<resources>
    <string name="app_name">HelloGoogleMap</string>
    <string name="hello_world">Hello world!</string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_hello_google_map">HelloGoogleMapActivity</string>
    <string name="mapKey">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</string>
</resources>

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

Gestion du zoom

1 – Bouton de zoom

Afin de permettre à l’utilisateur de zoomer à l’aide de bouton, il faut d’utiliser la méthode setBuiltInZoomControls comme

  • Dans le fichier de déclaration de vue main.xml, il faut ajouter un identifiant à la map (attribut id):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.google.android.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:apiKey="@string/mapKey"
        android:clickable="true" />

</RelativeLayout>
  • Dans la méthode OnCreate, initialiser une instance de la classe MapView afin d’activer les boutons de zoom
mapView = (MapView) this.findViewById(R.id.mapView);
mapView.setBuiltInZoomControls(true);

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

private MapView mapView;

Voila en quelques lignes on obtient :

2 – Niveau de zoom

Si vous souhaitez ajuster le niveau de zoom défini lors de l’initialisation de votre carte, utilisez la méthode setZoom. Par exemple :

mc = mapView.getController();
mc.setZoom(17);

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

private MapController mc;

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

Ce qui donnera :

Modifier le type de la carte

Vous pouvez afficher une vision satellite d’une carte. Pour cela, il suffit d’utiliser la méthode setSatellite en indiquant si vous souhaitez afficher la vision satellite (true) ou non (false).
Dans notre exemple, on va faire en sorte qu’au moment où l’utilisateur appuie sur le bouton VOLUME_UP (augmenter le volume) la vision satellite s’active. Même chose pour le bouton VOLUME_DOWN (vision satellite désactivée).
Pour cela on doit surcharger la méthode onKeyDown (Gérant les évènement des touches d’un appareil). Cette méthode doit retourner true si vous surcharger le comportement d’une touche et faux sinon.

Ce qui donne :

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
	if (keyCode == KeyEvent.KEYCODE_VOLUME_UP) {
		mapView.setSatellite(true);
		return true;
	} else if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN) {
		mapView.setSatellite(false);
		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).

Categories: Tutoriels

313 Responses so far.


  1. Willeme dit :

    Le cryptage de la clé privée n’est pas en md5 mais en sha1 …

  2. kze dit :

    Slt all!!
    Le lien : http://code.google.com/intl/fr/android/maps-api-signup.html
    est mort… :/

    SVP remettez à jour le lien… partout où j’essaye de trouver comment obtenir une clé pour mon appli, je trouve des liens 404.

    merci

  3. freddo dit :

    Bonjour jai suivi votre tuto a la lettre mais cela ne fonctionne pas chez moi, cela m’affiche juste une page blanche sans erreur!! j’ai meme essayé avec la GMap V2, tjrs aucun resultat!

  4. Soufiane dit :

    SVP j’ai fait les même étapes et rien afficher aide moi svp

Leave a Reply


Notifiez-moi des commentaires à venir via email. Vous pouvez aussi vous abonner sans commenter.