How to use BitmapDescriptor.fromAssetImage() to set a custom Marker icon? How to use BitmapDescriptor.fromAssetImage() to set a custom Marker icon? flutter flutter

How to use BitmapDescriptor.fromAssetImage() to set a custom Marker icon?


Define a field in Class:

BitmapDescriptor myIcon;

Retrieve icon before the Map is ready.

@overridevoid initState() {    BitmapDescriptor.fromAssetImage(        ImageConfiguration(size: Size(48, 48)), 'assets/my_icon.png')        .then((onValue) {      myIcon = onValue;    }); }

set the Icon:

icon: myIcon;

Make sure you have set the icon in Flutter section of pubspec.yaml

 assets:    - assets/my_icon.png


A better solution will be to wrap the GoogleMap widget inside a FutureBuilder. Generate your markers in a separate Future, and assign the result of the futureto the markers in the GoogleMap widget

FutureBuilder:

FutureBuilder(  future: generateMarkers(positions),  initialData: Set.of(<Marker>[]),  builder: (context, snapshot) => GoogleMap(            initialCameraPosition: CameraPosition(target: LatLng(0, 0)),    markers: snapshot.data,  ),);

markers generator:

Future<Set<Marker>> generateMarkers(List<LatLng> positions) async {List<Marker> markers = <Marker>[];for (final location in positions) {      final icon = await BitmapDescriptor.fromAssetImage(      ImageConfiguration(size: Size(24, 24)), 'assets/my_icon.png');  final marker = Marker(    markerId: MarkerId(location.toString()),    position: LatLng(location.latitude, location.longitude),    icon: icon,  );  markers.add(marker);}return markers.toSet();}


You could use it like:

Marker marker = Marker(        icon: await BitmapDescriptor.fromAssetImage(            ImageConfiguration(size: Size(48, 48)), 'assets/images/pin.png'        )    );