Custom dynamic Google Map Markers in Flutter (Use your own Widget)
Hello there,
Flutter is all about 3 things Widgets, Widgets and Widgets. So how would you use your Self-built widgets into google map?. Hop into this article, lets rip things.
If You ever used Native Google Map SDK BitmapDescriptor may be familiar for you. It does convert your Icon to Bitmap as it can be placed in Google Map. But, In our case we use dynamic widget so an asset image will not be a right choice !
So, whats our procedure of building it?
First lets, make an Google map screen by following this codelab. it is easy as that. might only take minutes.
Once we done. this is our Goal.
So what are the Steps ?
We need to paint a Widget and then convert it to bitmap. But its tricky because you cant simply do that. we have to place into widget tree and fetch its painted bitmap.
First
We need to get our bitmaps right after they are drawn. There are multiple ways to do this, I use tiny AfterLayoutMixin available here.
so now, create a dart file markergenerator.dart
Second
Lets create our custom widget, yay!
My widget accepts name as an parameter. I used ClipPath for the triangular Pointer arrow.
Third
Lets create a location object and list of locations and a method to generate widgets from the location list.
class Location {
final LatLng coordinates;
final String name;Location(this.coordinates, this.name);
}List<Location> locations = [
Location(LatLng(13.192594280276914, 80.30864386287254), "KFC"),
Location(LatLng(13.190922964992797, 80.3067341301787), "McDonald's"),
Location(LatLng(13.18791456868715, 80.30750660632454), "Subway"),
Location(LatLng(13.188269728511436, 80.30568270431355), "Starbucks")
];List<MapMarker> markerWidgets() {
return locations.map((l) => MapMarker(l.name)).toList();
}
And Finally
Lets make it into our UI file main.dart
Declare a list of Markers
List<Marker> customMarkers = [];Include this method in initstate(). this uses the Markergenerator class to get the list of bitmaps.
MarkerGenerator(markerWidgets(), (bitmaps) {
setState(() {
mapBitmapsToMarkers(bitmaps);
});
}).generate(context);Add this method which uses Bitmapdescriptor to convert bitmap to map marker.
List<Marker> mapBitmapsToMarkers(List<Uint8List> bitmaps) {
bitmaps.asMap().forEach((i, bmp) {
customMarkers.add(Marker(
markerId: MarkerId("$i"),
position: locations[i].coordinates,
icon: BitmapDescriptor.fromBytes(bmp),
));
});
}Add custom marker in GoogleMap as.
markers: customMarkers.toSet(),And That’s it. We have done it.
In Case you have doubt here is my Github Repository.
Hope this Helps !
MohanKumar
In case you have a question that is important to you and don’t want me to miss it, you can send me a mail at mohan.smk23@gmail.com
Want to see more content on Flutter? Buy me a coffee and fuel my writing passion!
Checkout my other articles.
