Custom Marker as a React Component with react-google-maps-api

Question

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?

Answer 1

Maybe it's a bit late to answer, but if it helps, you can use the OverlayView component instead of Marker, it works practically the same and you must pass a react component as children.

  <GoogleMap
    id="overlay-view-example"
    mapContainerStyle={mapContainerStyle}
    zoom={11}
    center={center}
  >
    <OverlayView
      position={center}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <div style={divStyle}>
        <h1>OverlayView</h1>

        <button
          onClick={onClick}
          type='button'
        >
          Click me
        </button>
      </div>
    </OverlayView>
  </GoogleMap>

This is an example taken from the doc: https://react-google-maps-api-docs.netlify.app/#overlayview