如何在react-google-maps中停止鼠标悬停和onmouseout事件上的标记闪烁？

Question

I'm using React.js and react-google-maps to implement this. I'm trying to display the InfoWindow on Hovering any Marker and hiding when mouse leaves the Marker. Here's the link for code. ( https://codesandbox.io/s/loving-microservice-88oop )

Answer 1

It's quite simple actually. Let's go through this together.

1. You are hovering the element
2. The element gets visible, you are now with your mouse cursor over the element
3. Because you are now no longer hovering the marker (you are now actually hovering the popup) the popup get's hidden.
4. Now that the popup is hidden you are basically starting from 1) again

How to prevent this:

Option 1: Change your hover so that it's also applied to the popup and not just for the marker

Option 2: Change the markers position. You can do this by changing this line (line 36 in your example):

position={{
            lat: selectedPark.geometry.coordinates[1] + 0.0500,
            lng: selectedPark.geometry.coordinates[0]
          }}

Answer 2

I solved this by using pixelOffset option available as props. In the other answer, It was using lat as offset but when we zoom, it no longer persists in that position.