Flutter Question posted in
The official Flutter documentation can be found here.

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    Try the following code:

    void initState(){
  initiateMarkers();
}

void initiateMarkers()async{
  
  red = await getImage('pass path here');
  blue = await getImage('pass path here');
}

    and here’s how getImage works:

      Future<BitmapDescriptor> getImage(String assetPath)async{
    final asset = await rootBundle.load(assetPath);
    final icon = BitmapDescriptor.fromBytes(asset.buffer.asUint8List());
    return icon;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search