0

I am currently trying to change the color of the default marker on the map. The library that is being used is @react-google-maps/api.

This is the load handler for the markers:

const markerLoadHandler = (marker, mPos) => {
    return { [mPos.index]: marker }
  }

I am mapping markers to the map.

{roadParamData.map((mPos) => {
            const RightNorth = parseFloat(mPos.RightRutLat)
            const RightEast = parseFloat(mPos.RightRutLon)
            return (
              <MarkerF
                onLoad={(marker) => markerLoadHandler(marker, mPos)}
                key={mPos.index}
                position={{ lat: RightNorth, lng: RightEast }}
                label={{text: mPos.RightRut, color: colors.white}}
                //icon={{fillColor: colors.blue_02}}
                icon={{
                  //path: window.google.maps.SymbolPath.CIRCLE,
                  path: "M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z",
                  fillColor: colors.blue_02,
                  fillOpacity: 1.0,
                  strokeWeight: 0,
                  scale: 1.0
                }}
              />
            )
          })}

When I'm using the default icon label text is correctly aligned.

enter image description here

But when I use the custom marker the labels get misaligned but I can change the color of the marker without problems.

enter image description here

Should I try using customer marker? If so how can I make sure labels are aligned correctly if default marker color can't be changed.

Jukka Koivu
  • 269
  • 4
  • 15

0 Answers0