Open 3dyuval opened 1 year ago
Or at least can we add support for AdvancedMarkerView(https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers) for React
Maybe you can use OverlayView ? https://react-google-maps-api-docs.netlify.app/#overlayview
Maybe you can use OverlayView ? https://react-google-maps-api-docs.netlify.app/#overlayview
Interesting, this feature is still in preview though?
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.
AdvancedMarkerView
doesn’t appear to allow click events like the google-map-react
implementation (i.e. On the marker child components).
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.
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"
Seems a little silly you are forced to use the default Marker and MarkerCluster components.
Has anyone found a solution? I'm trying to figure out how to pass a class name to the Marker...
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)}
/>
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 hasposition
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.