Search code examples
google-maps-api-3fadeoutpolygons

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


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?


Solution

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