How to change z-index for marker that was hovered with the cursor?

[chuprik]

I have a problem with the overlay of markers. I would like to change z-index of Marker element when cursor overs Marker. Generally, it can be solved using CSS, but Marker component doesn't provide className prop, only style prop but without mouse enter/hover and mouse leave events.

[johnmistica0]

Marker doesnt have className, but has the style property. You can do this by wrapping the marker in a span div with onMouseEnter/onMouseLeave properties and then modifying the zIndex through the style property on the Marker.

See my example:

export default function CustomMarker({ location }: any) {
  const [focus, setFocus] = useState(false)
  return (
    <span onMouseEnter={() => setFocus(true)} onMouseLeave={() => {setTimeout(() => {setFocus(false)}, 500)}}>
      <Marker longitude={location.lng} latitude={location.lat} anchor="center" style={{ cursor: 'default', zIndex: `${focus ? '100' : '0'}` }}>
         <p>Preview Text</p>
      </Marker>
    </span>
  )
}