flutterdartgoogle-maps-flutter

Flutter - Google Maps custom marker icon BitmapDescriptor.asset() is not showing


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: _json is empty

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?


Solution

  • Fixed by updating google_maps_flutter from 2.4.0 to 2.7.0. Newest version works fine