transition of polygon opacity in google maps v3

Question

I need to see the transition of colors from zero opacity to 1. The idea is that you can see the transition of color, but not how to do it, this is the code that I have:

var geocoder;
var shape = [];
var map;
// Define the LatLng coordinates for the polygon's path.
var coordinates = [
    [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)],

    [
    new google.maps.LatLng(32.990236, -89.296875),
    new google.maps.LatLng(42.163403, -86.835938),
    new google.maps.LatLng(42.163403, -76.113281)]
];

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(35.394070, -78.515056),
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

}

function update(color) {
    for (var i in coordinates) {
        var options = ({
            path: coordinates[i],
            strokeColor: 'black',
            strokeOpacity: 0.3,

            strokeWeight: 1,
            fillColor: color,
            fillOpacity: 0.9,
            zIndex: 1,
            map: map
        });
        if ( !! shape[i] && !! shape[i].setMap) {
            shape[i].setMap(null);
        }
        shape[i] = new google.maps.Polygon(options);
    }
}
var i = 0

    function reload() {
        i = i + 1;
        var color = "#FFFFFF";

        if (i % 2 == 0) {
            color = "#0000FF";
        }
        update(color);
    }

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

I have an idea to do with this piece of code of code but not if it works, and it runs very fast.

var opa = 0;
while (opa <= 1) {
   shape[i].setMap(null);
   shape[i].fillOpacity = opa;
   shape[i].setMap(map);
   opa = opa + 0.1;
}

http://jsfiddle.net/qqgmhcmo/

Answer 1

add a window.setTimeout(); around the code inside your while loop. eg

var opa=0;
while(opa<=1){
   window.setTimeout(function() {
      shape[i].setMap(null);
      shape[i].fillOpacity=opa;
      shape[i].setMap(map);
      opa=opa+0.1;
   }, 500);
}