IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Intégration Google Maps dans Android

Ce tutoriel va vous montrer comment intégrer une carte Google Maps dans votre programme sous Android.


22 commentaires Donner une note à l´article (4.5)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Prérequis

Afin de pouvoir intégrer les cartes sous Google Maps, veuillez vous référer au tutoriel pour l'installation du SDK :
lien

II. Obtention de la clé API

II-A. md5 checksum

Avant de pouvoir insérer une carte Google Maps dans l'interface graphique, il faut obtenir une clé API.

Tout d'abord, il faut créer un md5 checksum du debug certificate car chaque application doit être signée et la clé API est basée justement sur ce certificat.

Pour afficher ce md5, il faut d'abord savoir où se situe ce fichier de debug :

  • Vista: C:\Users\\AppData\Local\Android\debug.keystore
  • XP: C:\Documents and Settings\\Android\debug.keystore
  • Mac, Linux: ~/.android/debug.keystore

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 taper la commande suivante dans une console :

 
Sélectionnez
$ keytool -list -alias androiddebugkey -keystore <chemin_vers_le_fichier_debug>.keystore -storepass android -keypass android

Vous devriez obtenir un affichage similaire à celui-ci :

ftp://ftp-developpez.com/michel-dirix/tutoriels/android/integration-google-maps-android/images/screen2.png

II-B. Génération de la clé API et insertion dans le projet

Une fois cette première clé md5 checksum obtenue, vous pouvez générer la clé API à cette adresse :

http://code.google.com/intl/fr/android/maps-api-signup.html

un compte Google étant nécessaire.


Une fois la clé API obtenue, il faut l'ajouter dans le fichier String.xml de la façon suivante :

 
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="hello">Hello World, map</string>
<string name="app_name">map</string>
<string name="mapskey">056sXXXXxHceXYXYYhqy7R_BgNXXXXx6D0l_qNg</string>
</resources>

Il faut également modifier le fichier AndroidManifest.xml pour lui indiquer que l'API Google Maps est utile ainsi qu'ajouter les autorisations nécessaires pour utiliser Internet et la localisation et ceci se fait de la manière suivante :

Android 1.0
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.developpez"
      android:versionCode="1"
      android:versionName="1.0.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
    <uses-library android:name="com.google.android.maps" />
        <activity android:name=".map"
                  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.ACCESS_COARSE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>
Android 1.5
Sélectionnez
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.developpez"
      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=".Map"
                  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-sdk android:minSdkVersion="3" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>                
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

Comme vous pouvez le voir, il y a très peu de différences entre les deux versions.

III. Application graphique

III-A. Code

Une fois cette clé obtenue, nous pouvons enfin nous lancer dans le code.

 
Sélectionnez
package com.developpez;

import android.os.Bundle;
import android.widget.LinearLayout;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;

public class Map extends MapActivity {
    
    private MapView mapView;
    private MapController mc;
    private GeoPoint location;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
           
        this.mapView =  new MapView(this,this.getResources().getString(R.string.mapskey));
        this.mapView.setClickable(true);
         this.mc = this.mapView.getController();
         double latitude = 50.606;
         double longitude = 3.15;
         this.location = new GeoPoint((int) (latitude * 1000000.0),(int) (longitude * 1000000.0));
        this.mc.setCenter(this.location);
         this.mc.setZoom(17);
         this.mapView.setSatellite(true);
         this.mapView.invalidate();

        this.setContentView(this.mapView);
       }

    public GeoPoint getLocation() {
        return location;
    }

    public void setLocation(GeoPoint location) {
        this.location = location;
        this.mc.setCenter(this.location);
        this.mapView.invalidate();
    }

    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

III-B. Explications

 
Sélectionnez
this.mapView =  new MapView(this,this.getResources().getString(R.string.mapskey));


Cette ligne crée la carte en récupérant la clé API qui a été ajoutée dans le fichier String.xml modifié précédemment.

 
Sélectionnez
this.mc = this.mapView.getController();
double latitude = 50.606;
double longitude = 3.15;
this.location = new GeoPoint((int) (latitude * 1000000.0),(int) (longitude * 1000000.0));
this.mc.setCenter(this.location);


Cette partie se charge de récupérer le contrôleur chargé de positionner la carte à l'endroit indiqué par les coordonnées latitude et longitude (ces données sont multipliées par 10E6, car les coordonnées pour GeoPoint sont exprimées en microdegrés).

 
Sélectionnez
this.mc.setZoom(17);
this.mapView.setSatellite(true);
this.mapView.invalidate();


Change le zoom pour un zoom rapproché et passe la carte en vue satellitaire. On demande ensuite à redessiner la carte.

III-C. Résultat

ftp://ftp-developpez.com/michel-dirix/tutoriels/android/integration-google-maps-android/images/screen.png

IV. Conclusion

Toute cette démarche nous a permis de développer notre première application intégrant une carte Google Maps. Cette carte s'avère très basique, mais il est possible d'aller plus loin et de développer des applications à l'instar d'Apple avec son kit Nike+ Ipod.

V. Remerciements

Je tiens à remercier Ricky81 pour son aide et ses conseils pour la rédaction de mon premier tutoriel et l'utilisation de mon compte.

VI. Liens

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Copyright © 2009 Michel Dirix. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.