Google Maps fade circle

fades a circle object for a specified interval.

by bryan_weaver

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}

JavaScript

var circle, map;

function asyncLoop(iterations, func, callback) {
    /// <summary>Loop over an asyncronus function</summary>
    /// <param name="iterations" type="Number">Number of time to iterate through the loop</param>
    /// <param name="func" type="Function">Function to call during the loop</param>
    /// <param name="callback" type="Function">function to call after the loop completes</param>
    var index = 0;
    var done = false;
    var loop = {
        next: function() {
            if (done) {
                return;
            }

            if (index < iterations) {
                index++;
                func(loop);

            } else {
                done = true;
                callback();
            }
        },

        iteration: function() {
            return index - 1;
        },

        breakout: function() {
            done = true;
            callback();
        }
    };
    loop.next();
    return loop;
}

function OpacityChange(loop, speed) {
    setTimeout(function() {
        if (circle) {
            circle.setMap(null);
        }

        var count = 1 - loop.iteration() * 0.1;
        var circleOpts = {
            center: new google.maps.LatLng(38.713107, -90.42984),
            map: map,
            radius: 1000,
            strokeWeight: 0,
            fillColor: '#333333',
            fillOpacity: count
        };

        circle = new google.maps.Circle(circleOpts);
        loop.next();
    }, speed);
}


function initialize() {
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 12,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    asyncLoop(11, function(loop) {
        OpacityChange(loop, 500);
    }, function() {});
}

google.maps.event.addDomListener(window, 'load', initialize);