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:

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:

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.