onMouseover, onMouseout work on every mouse move on marker

[mzaremski]

Hello! I want to show to screen something only when mouse is over marker. So I am use onMouseover prop to show element and onMouseout to hide element. I want too do something when I click marker.

Unfortunately when I use onMouseover and onMouseout props, onClick event don't work. It is first problem. Second is it, that onMouseover and onMouseout work every mouse move on marker then cause flashing my element to show.

I don't have any idea to fix it. Could you help me?

Code:

<Marker
     title={item.markerName}
     id={item.markerId}
     key={index}
     onClick={this.onMarkerClick.bind(this)}
     onMouseover={this.showPopUpOfMarker.bind(this)}
     onMouseout={this.hidePopUpOfMarker.bind(this)}
 />

showPopUpOfMarker(marker){
        console.log("Mouse over")
        this.setState({markerPopUp:marker})
}

hidePopUpOfMarker(){
        console.log("Mouse out")
        this.setState({markerPopUp:false})
}

Console log when I move mouse over marker:

Mouse over
Mouse out
Mouse over
Mouse out
Mouse over
Mouse out

[q3chap]

Don't know if you still have the problem, the solution I found to solve my problem was adding a timer to the mouseover and mouseout event. It would looks in your case something like this:

var eventTimeout;


// There is a google maps bug of moving cursor several times over and out

showPopUpOfMarker(marker){
        
clearTimeout(eventTimeout);
eventTimeout = setTimeout(function(){
        console.log("Mouse over");
        this.setState({markerPopUp:marker});
},
100);
}

hidePopUpOfMarker(){
        console.log("Mouse out")
        this.setState({markerPopUp:false})
       // If we already left marker, clear the timeout
       clearTimeout(eventTimeout);
}

[sonalikatara]

Did you try marker.setIcon() on the MouseOver and MouseOut events? it worked for me.

[prakhar-tiwari]

Try onMouseLeave instead of onMouseOut

[daylightsettings70]

The solution is in my grasp

https://certain-vidal.github.io/yHvw9bt3ZghXuKyh/