Question

I’m working on a map that has several pre-existing polygons. The polygons are outlined and filled in red.

On mouseover, the infoWindow appears with the polygon’s title and on mouseout the infoWindow disappears, which is correct.

I’ve added a click event listener so that on click the polygon is outlined and filled with yellow to indicate the “current” polygon.

I have two problems with the mouseout and click events:

1. If the user clicks on a second polygon, I want the first selected polygon to return to the original red fill/outline.

2. The click event listener also makes the infoWindow appear over the selected polygon, but once the user hovers or mouses-over another polygon, the infoWindow disppears as it is canceled out by the mouseout event. I want the infoWindow to stay, and then I can add a z-index for any other infoWindows that appear on mouseover.

Code:

    var overlay = new google.maps.Polygon({
        paths: verticesArray,
        strokeColor: "#FF0000",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#FF0000",
        fillOpacity: 0.20,
        position: cent,
        map:map });

    function attachInfoWindow(overlay, number) {
      var infowindow = new google.maps.InfoWindow({ content: siteNames[number]});
      google.maps.event.addListener(overlay, 'mouseover', function() { infowindow.open(map, overlay); });
      google.maps.event.addListener(overlay, 'mouseout', function() { infowindow.close(map, overlay); });
      google.maps.event.addListener(overlay, 'click', function() {
            infowindow.open(map, overlay); 
            this.setOptions({ strokeColor: '#ffd100', fillColor:"#ffd100", fillOpacity:0.5,
      });
    });

I’m not good at javascript and am not sure how to fix these click and mouseout event problems.

Please let me know if more info is required or whether clarification is required.

MTIA.

Answer 1

I shall try to answer your questions.

1)
One thing you can do is have a global variable called selectedPolygon, and each time a user presses a Polygon, you change the color of the previously selectedPolygon, and set the variable to point to the Polygon the user have just pressed. This sort of thing have worked well for me in the past.

2)
I am pretty sure there is no immediate way to say “Don’t run the mouseout event”. A solution, although not that pretty, could be to have a global array filled with all the infowindows you want to stay open. Then in your mouseout event you run through that array and check whether the infowindow is in the array, and if it’s not you close it.
You must ofc remember to remove the infowindows from the array and close them when you don’t want them to be showed anymore 🙂

Hope this helped.

EDIT

Here’s a small example where I use the technique on a infowindow to make sure an open one closes if you try to open a new one:

var currentinfowindow = null;

function addeventlistenerinfo(marker, infowindow, i){
        google.maps.event.addListener(marker, 'click', function() {
                if (currentinfowindow)
                    currentinfowindow.close();
                infowindow.open(map,marker);
                currentinfowindow = infowindow;
            });
    }

The code is two snippets and consists of the global variable currentinfowindow, and the function addeventlistenerinfo.

The function simply makes a eventlistener for your marker, and you could do this for your overlay instead. The whenever you run the event, you check whether the global variable has a value, and then do your rutine that sets the color of the different Polygons.

This is the best example I can come with right now. Hope it helps to clarify it a bit.