2

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?

Phil Lucks
  • 2,704
  • 6
  • 31
  • 57
  • What is a *true custom-marker*? What customization would you need? – MrUpsidown Jul 14 '21 at 09:17
  • well, a complex icon - more than 1 color and more than 1 svg path data attribute. Ideally, a native SVG asset file that isn't hosted as a URL. If it's a react library in use, why not be able to pass in a react component as a child? I think it's a learning curve about how opinionated the native Maps API is... – Phil Lucks Jul 14 '21 at 14:52
  • How is it hosted then? And what is the issue with using a multi path SVG file as the marker icon? You should provide a [mcve] allowing to reproduce the issue. I don't understand what you are unable to achieve and why. – MrUpsidown Jul 14 '21 at 15:02

1 Answers1

11

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

joaquin de los reyes
  • 111
  • 1
  • 3