How to Add Custom Markers on Google Maps in Flutter?

Flutter offers great flexibility when it comes to customizing maps, especially with the google_maps_flutter: ^2.5.0 plugin. In this tutorial, we will explore how to replace the standard marker icon with any custom widget using the screenshot: ^2.1.0 plugin.

Step 1: Create a Flutter project

If you haven't installed Flutter yet, follow the instructions on the official Flutter website to do so. After that, create a new Flutter project using the following command:

flutter create mon_projet_maps
cd mon_projet_maps

Step 2: Set Up Google Maps
Add the google_maps_flutter plugin to your pubspec.yaml file and run flutter pub get to install the dependencies.

dependencies:
  google_maps_flutter: ^2.5.0

Now, initialize Google Maps in your application. Make sure to add your Google Maps API key. You can follow the instructions here

Step 3: Create a Replacement Widget
Create the widget you want to use as a replacement for the marker icon. For example, let's take this example:

	///Custom widget representing a marker on the map.
	class CustomMarker extends StatelessWidget {
	const CustomMarker({super.key, required this.name, required this.image});
	final String name;
	final String image;
	@override
	Widget build(BuildContext context) {
	return Column(
	crossAxisAlignment: CrossAxisAlignment.start,
	children: [
	Container(
	padding: const EdgeInsets.all(5),
	decoration: BoxDecoration(
	color: const Color(0xffFEC83A),
	borderRadius: BorderRadius.circular(10),
	),
	child: Text(
	name,
	style: Theme.of(context)
	.textTheme
	.bodyLarge!
	.copyWith(fontWeight: FontWeight.w700, fontSize: 15),
	),
	),
	const SizedBox(
	height: 10,
	),
	Container(
	padding: const EdgeInsets.all(5), // Border width
	decoration: const BoxDecoration(
	color: Color(0xffFEC83A), shape: BoxShape.circle),
	child: ClipOval(
	child: SizedBox.fromSize(
	size: const Size.fromRadius(18), // Image radius
	child: Image.network(image, fit: BoxFit.cover),
	// child: Image.asset(image, fit: BoxFit.cover),
	),
	),
	)
	],
	);
	}
	}

view raw custom_marker.dart hosted with ❤ by GitHub

Step 4: Use the screenshot plugin for BitmapDescriptor
Add the screenshot plugin to your pubspec.yaml file:

dependencies:
  google_maps_flutter: ^2.5.0
  screenshot: ^2.1.0

Use this plugin to capture the custom widget and convert it into a BitmapDescriptor:

	///Generates a custom [BitmapDescriptor] from a [CustomMarker] widget.
	Future<BitmapDescriptor> customMarkerIcon({
	required String image,
	required String name,
	}) async {
	final Uint8List result = await ScreenshotController().captureFromWidget(
	CustomMarker(
	image: image,
	name: name,
	),
	context: context,
	targetSize: const Size(200, 150),
	pixelRatio: 3.0
	);
	return BitmapDescriptor.fromBytes(result);
	}

view raw custom_marker_icon.dart hosted with ❤ by GitHub

Now, use the customMarkerIcon function to obtain your custom BitmapDescriptor and use it when adding markers to the map.

If you want to find a complete example check out this repository.

Ps: Don't forget to leave a comment if you enjoyed.