I'm working on a Flutter project using FlutterFlow where I need to display various businesses on a Google Map. Each business belongs to a specific category (restaurants, bars, leisure, etc.), and I want to display markers with different colors based on their category.
BUT this flutterflow widget ``FlutterFlowGoogleMap`` is like:
```
class FlutterFlowMarker {
const FlutterFlowMarker(this.markerId, this.location, [this.onTap]);
final String markerId;
final latlng.LatLng location;
final Future Function()? onTap;
}
class FlutterFlowGoogleMap extends StatefulWidget {
const FlutterFlowGoogleMap({
required this.controller,
this.onCameraIdle,
this.initialLocation,
this.markers = const [],
this.markerColor = GoogleMarkerColor.red,
this.markerImage,
this.mapType = MapType.normal,
this.style = GoogleMapStyle.standard,
this.initialZoom = 12,
this.allowInteraction = true,
this.allowZoom = true,
this.showZoomControls = true,
this.showLocation = true,
this.showCompass = false,
this.showMapToolbar = false,
this.showTraffic = false,
this.centerMapOnMarkerTap = false,
super.key,
});
final Completer<GoogleMapController> controller;
final Function(latlng.LatLng)? onCameraIdle;
final latlng.LatLng? initialLocation;
final Iterable<FlutterFlowMarker> markers;
final GoogleMarkerColor markerColor;
final MarkerImage? markerImage;
final MapType mapType;
final GoogleMapStyle style;
final double initialZoom;
final bool allowInteraction;
final bool allowZoom;
final bool showZoomControls;
final bool showLocation;
final bool showCompass;
final bool showMapToolbar;
final bool showTraffic;
final bool centerMapOnMarkerTap;
@override
State<StatefulWidget> createState() => _FlutterFlowGoogleMapState();
}
```
The problem
As you can see, the FlutterFlowGoogleMap widget only allows setting one markerColor for all markers. I want to show markers with different colors based on the business category (e.g., red for restaurants, blue for bars, etc.).
I've tried several approaches:
- Creating multiple maps in a stack | This causes performance issues and doesn't work well with user interaction.
- Looking for a way to set individual marker colors | The FlutterFlowMarker class doesn't seem to support this.
What I'm looking for
Is there a way to set individual marker colors in FlutterFlow?
If not, what's the most efficient workaround?
Is there a way to customize the markers with custom icons instead of colors?
I'd prefer a solution that doesn't require modifying the FlutterFlow library code, if possible (because I use FlutterFlow App so I can't)