How to Build a Custom Interactive Map Feature in FlutterFlow

1// Custom Widget: ClusteredMap with Marker Tap Callback
2import 'package:flutter/material.dart';
3import 'package:google_maps_flutter/google_maps_flutter.dart';
4import 'package:google_maps_cluster_manager/google_maps_cluster_manager.dart';
5
6class Place with ClusterItem {
7  final String id;
8  final String name;
9  final LatLng latLng;
10  Place({required this.id, required this.name, required this.latLng});
11  @override
12  LatLng get location => latLng;
13}
14
15class ClusteredMapWidget extends StatefulWidget {
16  final double width;
17  final double height;
18  final List<dynamic> locations;
19  final Future Function(String id, String name, double lat, double lng)? onMarkerTap;
20
21  const ClusteredMapWidget({
22    Key? key,
23    required this.width,
24    required this.height,
25    required this.locations,
26    this.onMarkerTap,
27  }) : super(key: key);
28
29  @override
30  State<ClusteredMapWidget> createState() => _ClusteredMapWidgetState();
31}
32
33class _ClusteredMapWidgetState extends State<ClusteredMapWidget> {
34  late ClusterManager<Place> _manager;
35  Set<Marker> _markers = {};
36  GoogleMapController? _mapCtrl;
37
38  @override
39  void initState() {
40    super.initState();
41    final places = widget.locations.map((l) => Place(
42      id: l['id'] ?? '',
43      name: l['name'] ?? '',
44      latLng: LatLng((l['lat'] ?? 0).toDouble(), (l['lng'] ?? 0).toDouble()),
45    )).toList();
46
47    _manager = ClusterManager<Place>(
48      places,
49      (markers) => setState(() => _markers = markers),
50      markerBuilder: _buildMarker,
51    );
52  }
53
54  Future<Marker> _buildMarker(Cluster<Place> cluster) async {
55    return Marker(
56      markerId: MarkerId(cluster.getId()),
57      position: cluster.location,
58      onTap: () {
59        if (!cluster.isMultiple) {
60          final p = cluster.items.first;
61          widget.onMarkerTap?.call(p.id, p.name, p.latLng.latitude, p.latLng.longitude);
62        }
63      },
64      icon: cluster.isMultiple
65          ? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueAzure)
66          : BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
67    );
68  }
69
70  void animateTo(double lat, double lng, double zoom) {
71    _mapCtrl?.animateCamera(CameraUpdate.newLatLngZoom(LatLng(lat, lng), zoom));
72  }
73
74  @override
75  Widget build(BuildContext context) {
76    return SizedBox(
77      width: widget.width,
78      height: widget.height,
79      child: GoogleMap(
80        initialCameraPosition: const CameraPosition(
81          target: LatLng(37.7749, -122.4194),
82          zoom: 11,
83        ),
84        markers: _markers,
85        onMapCreated: (ctrl) {
86          _mapCtrl = ctrl;
87          _manager.setMapId(ctrl.mapId);
88        },
89        onCameraMove: _manager.onCameraMove,
90        onCameraIdle: _manager.updateMap,
91        myLocationEnabled: true,
92        myLocationButtonEnabled: true,
93        zoomControlsEnabled: false,
94      ),
95    );
96  }
97}