CODEWITHSUNDEEP
google-mapsflutterflutter-layoutflutter-dependencies
Flacon
Flacon

Reputation: 23

Flutter Maps: How to change Marker Icon on marker tap

I'm trying to find a solution for changing the marker icon when the marker is tapped, in order to give visual feedback. Still, I haven't figured out how to do this. The first thought was accessing the marker by index but since markers are arranged in a Set<Markers> there is no change to access it in a proper way. then it would be easy to just exchange the old marker by the new one. Is there a common way to do this?

Edit:

Using Java, there are options like. setIcon for markers. This is not the chase for Flutter.

like so:

marker.setIcon(BitmapDescriptorFactory.fromResource(R.drawable.ic_selected_user_mark_icon));

Happy coding :)

Upvotes: 1

Views: 4896

Answers (2)

moez cherif
moez cherif

Reputation: 101

//onTap Marker: 

 widget.markersStation.add(
      Marker(
        markerId: MarkerId(markerId),
        position: latLng,
        icon: iconMarkerStationGrey,
        onTap: () {
          setState(() {
            for (var j = 0; j < widget.markersStation.length; j++) {
              widget.markersStation[j] = widget.markersStation[j]
                  .copyWith(iconParam: iconMarkerStationGrey);
            }

            if (idMarkerSelected != int.parse(markerId)) {
              widget.markersStation[int.parse(markerId)] = widget
                  .markersStation[int.parse(markerId)]
                  .copyWith(iconParam: iconMarkerStationSelected);

              idMarkerSelected = int.parse(markerId);
            }
          });
   ),)


//onTap Map :

                markers: widget.markersStation.toSet(),
                onTap: (position) async {
                  _customInfoWindowController.hideInfoWindow!();

                  BitmapDescriptor iconMarkerStationGrey =
                      await BitmapDescriptor.fromAssetImage(
                          const ImageConfiguration(size: Size(24, 24)),
                          "icons/[email protected]");

                  if (idMarkerSelected > -1) {
                    setState(() {
                      widget.markersStation[idMarkerSelected] = widget
                          .markersStation[idMarkerSelected]
                          .copyWith(iconParam: iconMarkerStationGrey);
                      idMarkerSelected = -1;
                    });
                  }
                },

Upvotes: 0

Arnau Alloza
Arnau Alloza

Reputation: 61

I had the same problem. Google Maps API doesn't have this option. I resolved it manually.

You can create a flag and change the icon Marker in the Marker's onTap and GoogleMap's onTap properties.

int markerFlag = null;
List<Marker> _allMarkers = [];

Marker's onTap:

onTap: () {
            if (markerFlag != idMarker) {                  
              setState(() {
                if (markerFlag != null) {
                  _allMarkers[markerFlag] = _allMarkers[markerFlag].copyWith(iconParam: defaultMarkerIcon);
                }
               _allMarkers[idMarker] = _allMarkers[idMarker].copyWith(iconParam: selectedMarkerIcon);
               markerFlag = idMarker;
              });                
            }
          }

GoogleMap's onTap:

onTap: (value){
    if (markerFlag != null) {
      setState(() {
        _allMarkers[markerFlag] = _allMarkers[markerFlag].copyWith(iconParam: defaultMarkerIcon);
        markerFlag = null;
      });
    }
  }

Upvotes: 2

Related Questions