Home → The Blog → Application Mobile → Google map dans ...

20 mars 2019

Google map dans Flutter

Google Map dans Flutter

Cette fois-ci, nous allons implémenter le widget Flutter Google Map dans notre application mobile iOS Android. Les applications ont souvent besoin d’intégrer une carte pour positionner des lieux d’information. Grâce a ce widget, nous allons communiquer directement avec l’API Google, pour afficher la carte, télécharger des données, ajouter des points d’intérêt, des polygones ou des zones définies…

Nous resterons sur la base du widget, et commencerons par l’ajout d’une carte, l’ajout d’un marker et l’ajout de plusieurs markers avec interaction au clic. De quoi avoir un premier rendu intéressant pour une Google Map dans Flutter.

Afficher une Google Map dans Flutter

Pour utiliser le widget de Google map dans Flutter, nous allons premièrement ajouter le package google_map_flutter, puis l’import dans notre main.dart
On peut aussi ajouter d’autres packages pour afficher une carte dans notre application. Je vous laisse regarder dans pub.dartlang.org

1	google_maps_flutter: ^0.2.0+2

1	import 'package:google_maps_flutter/google_maps_flutter.dart';

Une fois le package installé, il nous faudra créer une clé API dans la console Google Cloud Platform.
Vous trouverez pleins de tutoriels sur internet pour le faire.

Maintenant que vous avez une API key Android et iOS pour Google Map, il faut les renseigner à notre application Flutter. Pour cela il va falloir passer dans le code Android et iOS.

Android :

1
2
3
4

manifest ...
application ...
meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"

iOS :

1
2
3
4
5
6
7
8
9
10
11
12
13

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[GMSServices provideAPIKey:@"YOUR KEY HERE"];
[GeneratedPluginRegistrant registerWithRegistry:self];
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Enfin, il ne nous reste plus qu’à afficher notre Google Map dans Flutter. Le widget reste simple d’utilisation comme tout autre widget dans Flutter.
N’oubliez pas d’ajouter l’import, si ce n’est pas déjà fait.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

class ThirdFragment extends StatefulWidget {
@override
_ThirdFragment createState() => _ThirdFragment();
}

class _ThirdFragment extends State<ThirdFragment> {

GoogleMapController mapController;

void _onMapCreated(GoogleMapController controller) {
mapController = controller;
}

@override
Widget build(BuildContext context) {

return new GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: CameraPosition(target: LatLng(45.7881142, 3.1002749), zoom: 11),
);

}
}

Ajouter des markers

Pour ajouter des markers sur notre Google Map, nous utilisons la fonction addMarker.
Petit rappel : si vous n’avez jamais utilisé de marker, celui-ci sert à identifier un emplacement sur une carte.

1
2
3
4
5
6
7
8
9

void _onMapCreated(GoogleMapController controller) {
mapController = controller;
mapController.addMarker(
MarkerOptions(
position: LatLng(45.7881142, 3.1002749),
icon: BitmapDescriptor.defaultMarker,
),
);
}

Marker Tapped

Pour ajouter plusieurs markers, nous allons créer un object lieu et une liste de lieux. L’idée est de faire une boucle avec addMarker à l’intérieur.

Notre object lieu prendra en paramètre un id, un titre, une latitude et une longitude.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

class Lieux {

int _id;
String _title;
double _lat;
double _lng;

Lieux(this._id, this._title, this._lat, this._lng);

double get lng => _lng;

set lng(double value) {
_lng = value;
}

double get lat => _lat;

set lat(double value) {
_lat = value;
}

String get title => _title;

set title(String value) {
_title = value;
}

int get id => _id;

set id(int value) {
_id = value;
}
}

Dans notre tableau list de lieux, nous ajoutons 4 nouveaux lieux.

1
2
3
4
5
6
7
8
9

List listLieux = [
new Lieux(0, "mon marker 0", 45.7881142, 3.1002749),
new Lieux(1, "mon marker 1", 45.7963867, 3.0265968),
new Lieux(2, "mon marker 2", 45.8576312, 3.0441062),
new Lieux(3, "mon marker 3", 45.8179256, 3.1002749)
];

GoogleMapController mapController;
Marker _selectedMarker;

Voilà, il ne nous reste plus qu’à boucler sur notre list et ajouter onMarkerTapped

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

void _onMapCreated(GoogleMapController controller) {
mapController = controller;

for (Lieux lieux in listLieux){

mapController.addMarker(
MarkerOptions(
consumeTapEvents: true,
position: LatLng(lieux.lat, lieux.lng),
infoWindowText: InfoWindowText(lieux.title, ''),
icon: BitmapDescriptor.defaultMarker,
),
);

mapController.onMarkerTapped.add(_onMarkerTapped);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

void _onMarkerTapped(Marker marker) {

bool isDiff = false;

if(_selectedMarker != null){
if(_selectedMarker != marker){
isDiff = true;
}
}
else{
isDiff = true;
}

if(isDiff){
Scaffold.of(context).showSnackBar(new SnackBar(
content: new Text("Marker : " + marker.id),
));
_selectedMarker = marker;
}
}

VOUS EN VOULEZ ENCORE ?

CHANGER D'UNIVERS !

Archives Vidéos

The Blog

L’instagrume

Application Mobile |