skip to Main Content

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;

  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(() {});


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:

 markers: {
      icon: isSelected ? bluePin : redPin

and I made sure to include them inside my pubspec.yaml:

  uses-material-design: true
    - 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?



  1. Chosen as BEST ANSWER

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

  2. Try the following code:

    void initState(){
    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