Afficher une Google Map

0f52181e397ba31c6832b144487f1c3f

Installation

Importer Google Maps

Dans votre fichier build.gradle, ajoutez la dépendance suivante :

compile 'com.google.android.gms:play-services-maps:7.5.0'

Google Console API

Première étape, se rendre sur la Google Console API afin d’authentifier son appli après des serveurs Google.

Créez un nouveau projet

Capture d’écran 2015-07-03 à 09.52.02

Se rendre dans la catégorie API et authentification / Identifiants

Capture d’écran 2015-07-03 à 09.57.48

Créez une clé, puis  Android key

Capture d’écran 2015-07-03 à 09.57.56

Signer son application

Pour la suite de ce tutoriel, je vous conseille d’avoir prit le temps de regarder le tuto concernant la signature des applications sur Android.

Sur le fichier keystore.jks ayant servi à signer votre application, exportez la signature SHA1 avec la commande suivante :

keytool -list -v -keystore keystore.jks

Capture d’écran 2015-07-03 à 12.07.31

Autoriser son application

Il faut ensuite construire une clé d’authentification, de la forme :

_hash_;_package_

Ce qui donne, pour notre package com.tutosandroidfrance.googlemapssample

C2:BB:47:66:D4:E6:53:32:4D:85:BC:C3:CE:74:CE:FB:80:49:92:7E;com.tutosandroidfrance.googlemapssample

Capture d’écran 2015-07-03 à 17.16.55

Ce qui me génère la clé suivante :

AIzaSyCWkw1XcNlP6IDJ8epBXFvb9Uh7pGYKL8Q
Capture d’écran 2015-07-03 à 18.12.28

Activer l’API Google Maps

Une fois votre identifiant en poche, rendez dans la section API et authentification, choisissez Google Maps Android API afin d’activer l’accès à l’api Google Maps

Capture d’écran 2015-07-03 à 17.10.05

Capture d’écran 2015-07-03 à 17.10.14

Préparer son Application

Prochaine étape, ajoutez les permissions nécessaires à l’utilisation des maps dans votre AndroidManifest.xml :

  • INTERNET
  • ACCESS_NETWORK_STATE
  • WRITE_EXTERNAL_STORAGE
  • ACCESS_COARSE_LOCATION
  • ACCESS_FINE_LOCATION

Pensez à activer OpenGLES dans votre application

<uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>

Puis, le plus important, renseignez votre API Key

<meta-data
       android:name="com.google.android.geo.API_KEY"
       android:value="AIzaSyCWkw1XcNlP6IDJ8epBXFvb9Uh7pGYKL8Q"/>

Fichier AndroidManifest.xml au complet :

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutosandroidfrance.googlemapssample" >

    <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="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyCWkw1XcNlP6IDJ8epBXFvb9Uh7pGYKL8Q"/>

    </application>

</manifest>

Ajouter une map à notre layout

layout/activity_main.xml

<FrameLayout 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"
    tools:context=".MainActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        />

</FrameLayout>

Récupérez le mapFragment avec getSupportFragmentManager().findFragmentById

SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);

Puis accédez à la google maps avec la fonction getMapAsync()

mapFragment.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(GoogleMap googleMap) {
                   //jouez avec la googleMap
            }
});

Ce qui donne, dans un exemple complet (afficher un marqueur sur Paris) :

MainActivity.java

public class MainActivity extends AppCompatActivity {

    static final LatLng PARIS = new LatLng(48.858093, 2.294694);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
        mapFragment.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(GoogleMap googleMap) {

                //ajoute un marker sur Paris
                googleMap.addMarker(new MarkerOptions().title("Paris").position(PARIS));

                //centre la google map sur Paris (avec animation de zoom)
                googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(PARIS, 15));
                googleMap.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);

            }
        });
    }

}

device-2015-07-03-214657

Les sources de ce tutoriel sont disponibles sur github

2 commentaire sur “Afficher une Google Map

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *