How can I create a custom marker from a Component?

[lucksp]

We are converting from google-map-react to react-google-maps-api which means more of a native Google Maps API experience.

Prior to the change, we were able to load a custom Marker as a React Component like:

<GoogleMaps>
  <UserPinContainer lat={userLocation.lat} lng={userLocation.lng}>
    <Tidal.Icon type="UserLocation" text="User" />
  </UserPinContainer>
</GoogleMaps>

From their docs of our original lib google-map-react, it says:

Instead of the default Google Maps markers, balloons and other map components, you can render your cool animated react components on the map.

While that is great, it proves this library moves away from the native API...

However, with the new Marker API from react-google-maps-api, React Components are not possible. They only expect string | google.maps.Icon | google.maps.Symbol; types, such as:

<Marker
    icon={{
        path: google.maps.SymbolPath.CIRCLE,
        scale: 7,
    }}
    position={centers[0]}
/>

or

<Marker position={{ lat: userLocation.lat, lng: userLocation.lng }}>
    <Tidal.Icon img type="UserLocation" text="User" />
</Marker>

I thought I could create a true custom-marker like:

const newMarker = new window.google.maps.Marker(MyComponent)

but no such luck.

What would be a good solution for this?

[RWOverdijk]

I'd also like to know. Currently my custom markers use OverlayView. While this does work, it doesn't allow me to move/drag them.

[lucksp]

I understand this library is trying to keep as close to the native API as possible. The best workaround I have comeup with is to convert an SVG to base64 and use that as a url path.

[RWOverdijk]

That won't do for a custom view. I'd rather implement custom drag and drop logic or even switch to an actual marker for repositioning.

Thanks for the suggestion though!

[tyren-r]

Also facing the same question. Easily doable in old library. Suppose I'll use the workaround suggested above for now.

Perhaps this is an opportunity to contribute!