Is there a way to fade out a V3 google.maps.Polygo

Question

Is there a way to fade out a V3 google.maps.Polygon?

Instead of just hiding / removing a standard Google Maps V3 polygon I want to fade it out.

Is this possible? Are there any plugins out there?

Answer 1

Use Javascript setInterval()/clearInterval() to change the opacity of the polygon incrementally. Something like this:

var opacity = [1, 0.8]
var polygon = new google.maps.Polygon({
        strokeColor: "#000099",
        strokeOpacity: opacity[0],
        strokeWeight: 2,
        fillColor: "#0000FF",
        fillOpacity: opacity[1],
        paths: [ /* your points here */ ]
});

var interval = setInterval(function() {
  if (opacity[0] <= 0.0 && opacity[1] <= 0.0) {
    clearInterval(interval);
    polygon.setVisible(false);
  } else {
    opacity[0] = Math.max(0.0, opacity[0] - 0.1);
    opacity[1] = Math.max(0.0, opacity[1] - 0.1);
    polygon.setOptions({strokeOpacity: opacity[0], fillOpacity: opacity[1]});    
  }
}, 50);

Answer 2

The following is a solution I created to address the uniform fade out of stroke and fill and I made it easily reusable by making it a function.

seconds is how long it will take the fade out to occur and callback so you could do perform another action once it completes.

In my project my callback function removes the polygon from the map and deletes the variable.

function polygon_fadeout(polygon, seconds, callback){
    var
    fill = (polygon.fillOpacity*50)/(seconds*999),
    stroke = (polygon.strokeOpacity*50)/(seconds*999),
    fadeout = setInterval(function(){
        if(polygon.strokeOpacity + polygon.fillOpacity <= 0.0){
            clearInterval(fadeout);
            polygon.setVisible(false);
            if(typeof(callback) == 'function')
                callback();
            return;
        }
        polygon.setOptions({
            'fillOpacity': Math.max(0, polygon.fillOpacity-fill),
            'strokeOpacity': Math.max(0, polygon.strokeOpacity-stroke)
        });
    }, 50);
}