How to display Google Maps markers with different colors in FlutterFlow ?

Custom Code

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)

What have you tried so far?

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.

Did you check FlutterFlow's Documentation for this topic?
No
4