[Feat] Add Support for onMouseOver and onMouseLeave props in <AdvancedMarker />

[rileymiller]

Target Use Case

Adding these props would enable developers to build functionality around AdvancedMarker hover states. e.g I'd like to be able to show a preview of some metadata in an InfoWindow when a marker is being hovered over.

Proposal

Add onMouseOver and onMouseLeave as props, similar to the current api of onClick and the drag event handlers.

[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>

[usefulthink]

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

[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

[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.

[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.

[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 :)

[jogoley]

Did anyone ever figure this out, I am following generally what you are saying but don't know how to implement the addition of listener.

[jogoley]

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>

I was able to use this method but was only able to use it after setting version='beta' in the props for APIProvider

[ewarrenG]

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 Can you share a code example of this? I'm unable to make it work how you describe