Currently, I am working on a project where I am creating polygons. The issue I am facing is that whenever the infoWindow is hovered over, the mouseout event on the polygon is triggered. I would like to prevent the mouseout event from firing unless the mouse moves outside of both the polygon and the infoWindow. Any suggestions on how to achieve this? Below is most of the relevant code snippet.
infoWindow = new google.maps.InfoWindow({
content: myContent
});
var polygon = new google.maps.Polygon({
paths: polygonPath,
strokeColor: data.color,
strokeOpacity: 0.5,
strokeWeight: 0,
fillColor: data.color,
fillOpacity: 0.5,
id:polygonId,
name: data.name,
shortDesc: data.short_desc,
map: map
});
google.maps.event.addListener(polygon, 'click', function(e){
infoWindow.open(map);
infoWindow.setPosition(e.latLng);
});
google.maps.event.addListener(polygon, 'mouseout', function(){
infoWindow.close();
});