I'm trying to set a custom marker icon for an app that uses google maps. Right now, the marker icons are suck on the default red pin icon even when I've set them to use a custom png asset.
I load the assets with BitmapDescriptor.asset
and it still shows the default icon. This is based off of this answer.
// Assets
late BitmapDescriptor redPin;
late BitmapDescriptor bluePin;
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) async {
redPin = await BitmapDescriptor.asset(
const ImageConfiguration(size: Size(55, 55)), AppAssets.pinred);
bluePin = await BitmapDescriptor.asset(
const ImageConfiguration(size: Size(55, 55)), AppAssets.pinblue);
setState(() {});
});
super.initState();
}
where AppAssets.pinRed
and AppAssets.pinBlue
are equal to assets/icons/pinRed.png
and assets/icons/pinBlue.png
respectively.
I use the icons like this in the UI:
GoogleMaps(
....
markers: {
Marker(
icon: isSelected ? bluePin : redPin
)
}
)
and I made sure to include them inside my pubspec.yaml
:
flutter:
uses-material-design: true
assets:
- assets/icons/
I notice that if were to put a breakpoint next to where I try to assign the icon inside the Marker
declaration, in VSCode the bluePin
variable data in the side looks like this:
notice that the _json
field is empty. I'm assuming that has something to do with this.
No matter what I try, they are continually stuck on the default red marker when I want my custom ones instead. Why are my custom marker icons not showing up?
Fixed by updating google_maps_flutter
from 2.4.0
to 2.7.0
. Newest version works fine