Ajouter une carte incluant un repère

Introduction

Ce tutoriel vous montre comment ajouter une carte Google à votre application Flutter. La carte comporte un repère, qui permet d'indiquer un lieu spécifique.

Récupérer le code

Clonez ou téléchargez le dépôt d'exemples Flutter. Vous trouverez l'exemple de code dans le répertoire google_maps.

Configurer votre projet de développement

Avant de poursuivre votre lecture, assurez-vous d'avoir suivi les étapes décrites dans le guide Configurer un projet Flutter.

1. Importer le package Google Maps pour Flutter

1. Ouvrez votre fichier main.dart dans votre IDE favori.
2. Assurez-vous que l'instruction d'importation suivante a été ajoutée au fichier :

import 'package:google_maps_flutter/google_maps_flutter.dart';

2. Ajouter Google Maps à votre application Flutter

Dans le widget Scaffold, ajoutez un widget GoogleMap dans le corps.

GoogleMap(
   initialCameraPosition: CameraPosition(
      target: _center,
      zoom: 11.0,
   ),
   markers: {
      const Marker(
         markerId: MarkerId('Sydney'),
         position: LatLng(-33.86, 151.20),
      )
   },
)

• L'option markerId définit le libellé de votre repère.
• L'option position définit où le repère s'affiche sur votre carte.

3. Créer et exécuter votre application

Lancez l'application Flutter en utilisant l'une des options suivantes :

1. Depuis votre IDE, cliquez sur le bouton Run.
2. Depuis la ligne de commande, exécutez flutter run.

Vous devriez voir une carte avec un repère centré sur Sydney (côte est de l'Australie), semblable à l'image figurant sur cette page.

Dépannage

• Si aucune carte ne s'affiche, vérifiez que vous avez bien obtenu une clé API et que vous l'avez ajoutée à l'application.
• Si vous avez utilisé l'identifiant du bundle iOS pour restreindre la clé API, modifiez-la afin d'ajouter l'identifiant du bundle pour l'application : com.google.examples.map-with-marker.
• Assurez-vous d'avoir un bon signal Wi-Fi ou GPS.
• Utilisez les outils de développement Flutter pour consulter les journaux et déboguer l'application.
• Découvrez comment exécuter une application Flutter.

4. Comprendre le code

Vous trouverez ce code sur GitHub.

1. Importez les packages nécessaires et initialisez l'application.

      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({super.key});
   
      @override
         State<MyApp> createState() => _MyAppState();
      }

2. Créez une carte centrée sur Sydney, en Australie.

   class _MyAppState extends State<MyApp> {
      
      late GoogleMapController mapController;
      
      final LatLng _center = const LatLng(-33.86, 151.20);
      
      void _onMapCreated(GoogleMapController controller) {
         mapController = controller;
      }

3. Ajoutez les widgets nécessaires pour afficher une carte dans une application.

   @override
   Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: const Text('Maps Sample App'),
             backgroundColor: Colors.green[700],
           ),
           body: GoogleMap(
               onMapCreated: _onMapCreated,
               initialCameraPosition: CameraPosition(
                 target: _center,
                 zoom: 11.0,
               ), // CameraPosition
           ), // GoogleMap
         ), // Scaffold
       ); // MaterialApp
     }
   }

4. Ajoutez les widgets des repères pour ajouter le widget à votre application.

      body: GoogleMap(
         onMapCreated: _onMapCreated,
         initialCameraPosition: CameraPosition(
            target: _center,
            zoom: 11.0,
         ),
         markers: {
            const Marker(
                  markerId: const MarkerId("Sydney"),
                  position: LatLng(-33.86, 151.20),
               ), // Marker
         }, // markers
      ), // GoogleMap
      ...

5. Ajoutez une fenêtre d'informations pour le repère.

         const Marker(
               markerId: const MarkerId("Sydney"),
               position: LatLng(-33.86, 151.20),
               infoWindow: InfoWindow(
                  title: "Sydney",
                  snippet: "Capital of New South Wales",
               ), // InfoWindow
         ), //Marker
         ...

   Par défaut, le package Google Maps pour Flutter affiche le contenu de la fenêtre d'informations lorsque l'utilisateur appuie sur un repère. Il n'est pas nécessaire d'ajouter un écouteur de clic pour le repère si le comportement par défaut vous satisfait.

Félicitations ! Vous avez créé une application Flutter qui affiche une carte Google avec un repère indiquant un lieu spécifique ainsi que des données complémentaires dans une fenêtre d'informations. Vous avez également appris à utiliser le package Google Maps pour Flutter.