Custom React Marker Component

[3dyuval]

How does it behave?

Hey, I'm coming from using GoogleMapReact and over there you can pass any React component as a child, and assuming it has position props then it will render on the map.

How should it behave correctly?

I feelreact-google-maps-api should have the same behavior or have at least a component that serves this behavior.

[amit-bs23]

Or at least can we add support for AdvancedMarkerView(https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers) for React

[gigeos]

Maybe you can use OverlayView ? https://react-google-maps-api-docs.netlify.app/#overlayview

[noobjun]

Maybe you can use OverlayView ? https://react-google-maps-api-docs.netlify.app/#overlayview

Interesting, this feature is still in preview though?

[amit-bs23]

Another thing that I discovered is that this OverlayView does not have any onClick so for example if you create a custom marker with this and if that marker is on top of a polygon then the OverlayView onclick does not work if you click on the marker, both polygon and the marker gets clicked.

[joshuabaker]

AdvancedMarkerView doesn’t appear to allow click events like the google-map-react implementation (i.e. On the marker child components).

[Arose-Niazi]

Maybe you can use OverlayView ? https://react-google-maps-api-docs.netlify.app/#overlayview

It can't be used like marker, as on zoom the pinpoint changes.

[prestonbourne]

Hey, I don't know how "custom" your component is going to be but i feel like you can squeeze alot of flexibility out of the info box.

I spent four hours today trying to do the same thing not realizing this is entirely separate from google-map-react so i'll try using it tomorrow and let you know how it goes. Feeling optimistic.

Update No longer feeling optimistic. In trying this solution I encountered https://github.com/JustFly1984/react-google-maps-api/issues/3172 this error. However it seems like this isn't the case for anyone else even in the docs the live example works. Wondering what could be the cause of this? I'm using "@react-google-maps/api" :version: "2.17.1"

[AJSihota]

Seems a little silly you are forced to use the default Marker and MarkerCluster components.

[SaavanNanavati]

Has anyone found a solution? I'm trying to figure out how to pass a class name to the Marker...

[mirhamasala]

Advanced markers aren't supported yet, but you can add a custom maker. Use the options key with icon, like so:

<MarkerF
  key={spot.slug}
  options={{
    icon: {
      scaledSize: new window.google.maps.Size(56, 56),
      url: spot.category.marker,
    },
  }}
  position={{
    lat: spot.geo.latitude,
    lng: spot.geo.longitude,
  }}
  onClick={() => openInfoWindow(spot)}
  onMouseOver={() => openInfoWindow(spot)}
/>

Also mentioned in discussions