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

Question

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?

score 4 · Accepted Answer · answered Mar 07 '12 at 16:31

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);
}

score 2 · Answer 2 · answered Mar 03 '12 at 15:39

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);

This solution does not address the uniform fade out of stroke and fill. My fill would be gone long before the stroke. I up voted though because it was super close to my first solution. — iambriansreed, Mar 07 '12 at 16:32

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

2 Answers2

Linked