[Feat] Add Support for onMouseOver and onMouseLeave props in `<AdvancedMarker />` about react-google-maps

[usefulthink]

We're in a bit of a transition-period right now – the version currently in beta will introduce the web-components (<gmp-map> and <gmp-advanced-marker>), and with that we'll probably also get support for DOM events on the AdvancedMarkerElement itself.

But I wouldn't want to make the beta-channel a requirement for using AdvancedMarker, if we can solve this in another way.

Until the web-components are in GA (weekly and quarterly channels), the best thing to do is probably to add the event-listeners to the advancedMarker.element instead. We probably don't even need a different handling of this for when web-components are released, but that remains to be seen.

[usefulthink]

Unfortunately, that doesn't work if your content is just a Pin component. I should be able to look into this tomorrow.

[usefulthink]

Yeah, I'm thinking the same. For the map it was necessary because the map-events mostly don't contain any useful data about the event, but here we have perfectly functional DOM-events already :)

[rvanderfeer]

I ran into this too. You can work around this by adding the props to your AdvancedMarker content, for example;

<AdvancedMarker
	ref={markerRef}
	position={markerPosition}
	onClick={() => setInfowindowOpen(true)}
	{...other}
>
	<div
		onMouseOver={() => setInfowindowOpen(true)}
		onMouseOut={() => setInfowindowOpen(false)}
		style={{
			width: 20,
			height: 20,
			position: 'absolute',
			top: 0,
			left: 0,
			background: '#F00',
			border: `2px solid #FFF`,
			borderRadius: '50%',
			transform: 'translate(-50%, -50%)'
		}}
	/>
	{infowindowOpen && (
		<InfoWindow
			anchor={marker}
			maxWidth={200}
			onCloseClick={() => setInfowindowOpen(false)}
		>
			infowindow content
		</InfoWindow>
	)}
</AdvancedMarker>

[BParvatkar]

Were you able to look into it @usefulthink. I was looking into the API reference for AdvanceMarker here. Seems that the addEventListener method is part of beta version as of now. The APIProvider component does allow us to pass version as prop. Was wondering if this will work:

• Pass version as beta in APIProvider prop
• The AdvancedMarker component extends for all EventListener.
• The user passes any listener as prop, let say onMouseEnter
• If APIProvider is initialized in beta mode then we allow this events, else give error saying that its still in beta and needs to initialize APIProvider in beta version.

The benefit of this approach is that we don't have to manually add each listener to the components like AdvancedMarker or Pin

[BParvatkar]

Is there any example of adding listeners to the advancedMarker.element or does it need to be built?

[usefulthink]

No, it's on my ToDo-list, but I haven't gotten to it yet. I'm still pondering if we should use wrapped events for the markers like we do for the map itself, or if we should just use the native events.

[BParvatkar]

Earlier it made sense to add each declaration because the type of events was MapMouseEvent and not the native events emitted by the element. But as per the docs, they will be emitting native events so I think it will be better to go the native way.