[Bug] onMouseEnter on AdvancedMarker only works when onClick is set

[antonio-pbilby]

Description

Using the onMouseEnter with a AdvancedMarker is only working when the same AdvancedMarker has a onClick property set. If I'm using the standar Pin, it works just fine.

Steps to Reproduce

<APIProvider
  apiKey={import.meta.env.VITE_API_GOOGLE_MAPS_API_KEY}
  region="BR"
  language="pt-BR"

>
  <Map
    defaultCenter={{
      lat: -15.4,
      lng: -47.4,
    }}
    defaultZoom={10}
    id="plots-list"
    mapId={import.meta.env.VITE_API_GOOGLE_MAPS_MAP_ID}
  >
    {plotLocations.map((plot) => {
      return <AdvancedMarker position={plot.location} key={plot.id} onMouseEnter={() => console.log('test')}
        onClick={() => {}}
      >
        <div>dummy component</div>
      </AdvancedMarker>
    })}
  </Map>
</APIProvider>

Environment

• Library version: 1.2.0
• Google maps version: weekly
• Browser and Version: Chrome 128.0.6613.138 (Official Build) (64-bit)
• OS: Windows 11

Logs

No response

[usefulthink]

@mrMetalWood can you have a look at that? This sounds like it could have something to do with the gmpClickable option for the advanced markers, which will be set when an onClick callback is defined.

@antonio-pbilby can you check if it works for you when you manually add the clickable prop to your markers?

https://github.com/visgl/react-google-maps/blob/43b5c95c7e87443c49d687b075b688e884d925b1/src/components/advanced-marker.tsx#L236-L244

[antonio-pbilby]

@mrMetalWood can you have a look at that? This sounds like it could have something to do with the gmpClickable option for the advanced markers, which will be set when an onClick callback is defined.

@antonio-pbilby can you check if it works for you when you manually add the clickable prop to your markers?

https://github.com/visgl/react-google-maps/blob/43b5c95c7e87443c49d687b075b688e884d925b1/src/components/advanced-marker.tsx#L236-L244

It worked with the default Pin, but not with my custom component.

Does not work:

<AdvancedMarker position={plot.location} key={plot.id}
  onMouseEnter={() => setHighlightedPlot(plot.id)}
  onMouseLeave={() => setHighlightedPlot(null)}
  clickable
>
  <div>dummy</div>
</AdvancedMarker>

Works:

<AdvancedMarker position={plot.location} key={plot.id}
  onMouseEnter={() => setHighlightedPlot(plot.id)}
  onMouseLeave={() => setHighlightedPlot(null)}
  clickable
/>

[mrMetalWood]

The gmpClickable is only available in the beta version of the api. https://developers.google.com/maps/documentation/javascript/reference/advanced-markers#AdvancedMarkerElement.gmpClickable

We could add a pointer-events: all to one of our markers wrappers when any of the interaction props (clickable, onClick, onMouseEnter, onMouseLeave) are set.

[usefulthink]

Sounds good. Should also apply for the onDrag* events as interaction props.