Many google map listeners existing at the same time

Question

At the moment I have a map with lots of regions defined by polygons, and each polygon has a different fillColor.

Then, I have the following effects when I hover over each polygon area:

google.maps.event.addListener(MapArea, "mouseover", function () {
    this.setOptions({ fillColor: 'rgb(0,255,255)' }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: 'rgb(255,0,0)' }); 
});

In other words, when I mouse over, the area turns cyan, when I remove the mouse, the area turns red. However, since my areas are all different colours, I would like to return to their colours when the mouse is removed.

The different colours are achieved by:

for (var t=0; t< lAll_Areas.length; t++) {
    var n = //arbitrary number 0<n<255;
    var m = (255-cd).toString();
    var col = 'rgb(' + n + ',' + m + ',0)';
    lAll_Areas[t].setOptions({ fillColor: col });
}

So, in there I would like to have something like:

google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: col }); 
});

How do I attach the mouseout event to each individual polygon?

Answer 1

One option: set the default and highlight colors as properties of the polygon.

for (var t=0; t< lAll_Areas.length; t++) {
    var n = //arbitrary number 0<n<255;
    var m = (255-cd).toString();
    var col = 'rgb(' + n + ',' + m + ',0)';
    lAll_Areas[t].defaultColor = col;
    lAll_Areas[t].highlightColor = 'rgb(0,255,255)';
    lAll_Areas[t].setOptions({ fillColor: col });
}

Then:

google.maps.event.addListener(MapArea, "mouseover", function () {
    this.setOptions({ fillColor: this.highlightColor }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: this.defaultColor }); 
});

Answer 2

Have your mouseover event listener store the current color in a global variable that your mouseout listener can refer to.

var color;

google.maps.event.addListener(MapArea, "mouseover", function () {
    color = this.fillColor;
    this.setOptions({ fillColor: 'rgb(0,255,255)' }); 
});
google.maps.event.addListener(MapArea, "mouseout", function () {
    this.setOptions({ fillColor: color }); 
});