0

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)

sai manish
  • 1
  • 1
  • 1

2 Answers2

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]
          }}
Tim Gerhard
  • 3,477
  • 2
  • 19
  • 40
  • It works but I have a button on InfoWindow. I need to display InfoWindow even after onmouseout event of marker. – sai manish May 28 '19 at 11:08
0

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.

sai manish
  • 1
  • 1
  • 1