Tag Archives: Javascript

Google Map mousemove event cancels click event for polygon

While working with google map, there is a requirement to show info window while hovering on polygon and enable click event to select the polygon.

I added two event listener for info window show and close: mousemove and mouseout and a click event to select the polygon. But after some weeks of the initial development, click event stopped working.

After some research, identified that mousemove event cancels click event. So what is the solution? ‘mouseover’. Used mouseover event to show info window and it started working again.

 //Show info of hovered polygon
 google.maps.event.addListener(polygon, 'mouseover', function (event) {
    marker.setPosition(event.latLng);
    marker.setVisible(true);
    $scope.hoverRegion(this.id);
});
//Hide info of hovered polygon
google.maps.event.addListener(polygon, 'mouseout', function () {
    marker.setVisible(false);
    $scope.unhoverRegion(this.id);
});

//Select/De-select region
polygon.addListener('click', function () {
    $scope.togglePolygonSelection(this);
});
Advertisements