Intégrer Google Maps dans une application Flutter

Implémenter Google Maps sur une application Flutter

Avant de pouvoir intégrer une carte dans votre application Flutter, quelques étapes préparatoires sont nécessaires.

Ajouter le package Google Maps

Ajoutez le package google_maps_flutter à votre projet Flutter en exécutant la commande suivante dans votre terminal :

flutter pub add google_maps_flutter

Assurez-vous aussi que votre projet a une version minimale de minSdkVersion d’au moins 21 (J’ai personnellement mis 23) en modifiant le fichier android/app/build.gradle :

defaultConfig {
    minSdkVersion 23
}

Activer le service Google Maps et créer une clé API

La deuxième étape, va être d’activer le service Google maps pour votre projet Flutter et de créer une clé API pour lui permettre d’y accéder.

1. Rendez-vous sur la console Google cloud et sélectionnez votre projet (Votre projet doit avoir été ajouté dans Firebase).
2. Dans la barre de recherche, tapez « Google Maps Platform » et activez le service.
3. Rendez-vous dans la section « Clés et identifiants » et cliquez sur « + Créer des identifiants ».
4. Une fois la clé créée, vous pouvez la copier pour l’utiliser plus tard.
5. Enfin, pour plus de sécurité, modifiez votre clé et restreignez sont utilisation, uniquement aux services dont vous avez besoin (ici les services Maps et Places API).

Intégrer le service sur Android

1. Pour permettre au service Google Maps de fonctionner sur Android, commencez par ajouter le plugin dans android/build.gradle :

buildscript {
    dependencies {
    //...
        classpath 'com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1'
    }
}

2. Dans android/app/build.gradle, ajoutez la configuration pour la clé API :

//A placer entre la partie plugin{} et la partie android{}

def secretsPropertiesFile = rootProject.file("secrets.properties")
def secretsProperties = new Properties()

if (secretsPropertiesFile.exists()) {
    secretsPropertiesFile.withReader("UTF-8") { reader ->
        secretsProperties.load(reader)
    }
}

android {
    defaultConfig {
        //...
        manifestPlaceholders["MAPS_API_KEY"] = project.hasProperty('MAPS_API_KEY') ? MAPS_API_KEY : "DEFAULT_API_KEY"
    }
}

3. Enfin, ajoutez votre clé API dans votre fichier AndroidManifest.xml :

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Intégrer le service sur iOS

Pour intégrer le service Google Maps sur IOS, commencez par ajoutez l’importation de Google Maps dans ios/Runner/AppDelegate.swift :

import GoogleMaps

2. Dans le même fichier, ajoutez également cette ligne :

GMSServices.provideAPIKey("YOUR-API-KEY")

3. Enfin, ajoutez les permissions de localisation dans ios/Runner/Info.plist :

<key>NSLocationWhenInUseUsageDescription</key>
<string>The app needs location permission</string>

Google Maps est désormais prêt à fonctionner sur IOS.

Ajouter une carte dans son application Flutter

Voici un exemple de code affichant une carte centrée sur une position spécifique :

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // Contrôleur pour interagir avec la carte
  late GoogleMapController mapController;

  // Coordonnées du centre de la carte (latitude, longitude)
  final LatLng _center = const LatLng(45.521563, -122.677433);

  // Fonction appelée lors de la création de la carte pour initialiser le contrôleur
  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Maps Sample App'),
          backgroundColor: Colors.green[700],
        ),
        body: GoogleMap(
          // Callback appelé lorsque la carte est créée
          onMapCreated: _onMapCreated,
          
          // Position initiale de la caméra
          initialCameraPosition: CameraPosition(
            target: _center, // Centre de la carte
            zoom: 11.0, // Niveau de zoom initial
          ),
        ),
      ),
    );
  }
}

Comment personnaliser sa carte

Maintenant que votre carte est intégrée, voici quelques manières de la changer.

Modifier le style de la carte

Vous pouvez utiliser mapType pour changer l’apparence de la carte :

GoogleMap(
  mapType: MapType.satellite, // Normal, Satellite, Terrain, Hybrid
  onMapCreated: _onMapCreated,
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 11.0,
  ),
)

Les différents types de cartes disponibles dans Google Maps Flutter sont :

1. MapType.normal : Carte par défaut, affichant les routes, bâtiments et points d’intérêt en mode standard.
2. MapType.satellite : Affiche une vue satellite sans aucun marquage des routes ou points d’intérêt.
3. MapType.terrain : Montre le relief du terrain, utile pour les zones montagneuses ou naturelles.
4. MapType.hybrid : Combine la vue satellite avec les routes et points d’intérêt superposés.

Ajouter des marqueurs

Il est également possible d’ajouter des marqueurs sur la carte afin d’indiquer des lieux spécifiques :

Set<Marker> _markers = {};

@override
void initState() {
  super.initState();
  _markers.add(
    Marker(
      markerId: MarkerId("id-1"),
      position: _center,
      infoWindow: InfoWindow(title: "Portland", snippet: "Ville de l'Oregon"),
    ),
  );
}

GoogleMap(
  markers: _markers,
  onMapCreated: _onMapCreated,
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 11.0,
  ),
)

Modifier l’animation de zoom

La propriété CameraUpdate permet de modifier dynamiquement la position et le zoom de la caméra sur la carte en effectuant des animations.

FloatingActionButton(
  onPressed: () {
    mapController.animateCamera(
      CameraUpdate.zoomIn(),
    );
  },
  child: Icon(Icons.zoom_in),
)

Les différentes valeurs que vous pouvez appliquer, sont les suivantes :

1. Zoom :
   • CameraUpdate.zoomIn() : Zoom avant.
   • CameraUpdate.zoomOut() : Zoom arrière.
2. Déplacement :
   • CameraUpdate.newLatLng(LatLng(latitude, longitude)) : Déplace la caméra vers un nouvel emplacement.
3. Déplacement + Zoom :
   • CameraUpdate.newLatLngZoom(LatLng(latitude, longitude), zoom) : Change à la fois la position et le niveau de zoom.
4. Mouvement vers une zone spécifique :
   • CameraUpdate.newLatLngBounds(LatLngBounds(southwest: LatLng(lat1, lng1), northeast: LatLng(lat2, lng2)), padding) : Ajuste la vue pour inclure tous les points dans la zone définie.
5. Mouvement relatif :
   • CameraUpdate.scrollBy(x, y) : Déplace la carte horizontalement et verticalement en pixels.

Activer la localisation de l’utilisateur

Enfin, ajoutez myLocationEnabled pour afficher la position de l’utilisateur :

GoogleMap(
  myLocationEnabled: true,
  myLocationButtonEnabled: true,
  onMapCreated: _onMapCreated,
  initialCameraPosition: CameraPosition(
    target: _center,
    zoom: 11.0,
  ),
)