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.
But when I use the custom marker the labels get misaligned but I can change the color of the marker without problems.
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.