2

I am trying to add a custom marker in React Google Maps and have each marker rotate based on the direction that the item is heading on the road.

I am able to make the rotation work when I use path for an svg instead of a url referencing an image. The problem with path is that I cannot get fillColor to work, only strokeColor. It would also be nice to have a complex shape and path is somewhat restricting in the type of shape that you can add to it, because cannot pass multiple paths into the string.

Please note that heading is getting the proper direction via my api and I have verified that it works.

Here is my current code, any help is appreciated. Thanks!

const createIcon = (heading) => ({
    width: '15px',
    url: 
 'my image path',
    rotation: heading || 0, // set the rotation prop to indicate direction
});
tripstar
  • 161
  • 1
  • 2
  • 11

1 Answers1

2

Do you have a <\Marker> component being rendered? This is what I was able to get working for rotating a Marker. No issues with fillColor either.

render() {
    return <Marker
        position={{ lat: this.state.longitude, lng: this.state.latitude }}
        icon={
            {
                path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                scale: 3,
                strokeColor: "#FFFFFF",
                fillColor: "#0000FF",
                fillOpacity: 1,
                rotation: 215
            }
        }
    />
}
Kyle O'Donnell
  • 63
  • 5
  • should probably add, if you're on react-google-maps right now, you should probably switch over to react-google-maps/api https://github.com/JustFly1984/react-google-maps-api – Kyle O'Donnell Mar 20 '21 at 13:34