Fade In circles in Google Maps

Question

On my map, I have it so that a node/circle is drawn at a certain location, and when this node is clicked, other related nodes appear nearby. However, I'd like to have them fade in after about one second instead of just appearing suddenly. I already had a look at this solution, but I couldn't really understand how it would translate over to my code. Is there an easy way to do this?

...

function initialize()
            {
            for(var num = 0; num < lat.length; num++)
            {
                nodeInfo[num] = 
                {
                    center: new google.maps.LatLng(lat[num], lon[num])
                }
            }

                // Styles
                var styles = [
                    {
                        stylers: [
                            {
                                hue: "#2222EE"
                            },
                            {
                                saturation: -40
                            }
                        ]
                    },
                    {
                        featureType: "road",
                        elementType: "geometry",
                        stylers: [
                            {
                                lightness: 100
                            },
                            {
                                visibility: "simplified"
                            }
                        ]
                    },
                    {
                        featureType: "road",
                        elementType: "labels",
                        stylers: [
                            {
                                visibility: "off"
                            }
                        ]
                    },
                    {
                        featureType: "transit.station.bus",
                        elementType: "labels.icon",
                        stylers: [
                            {
                                visibility: "off"
                            }
                        ]
                    }               
                ];

                var styledMap = new google.maps.StyledMapType(styles,
                {name: "Styled Map"});

                // Options for map
                var mapOptions =
                {
                    center: new google.maps.LatLng(42.35791, -71.063157),
                    zoom: 17,
                    mapTypeControlOptions:
                    {
                        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                    }               
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                map.mapTypes.set('map_style', styledMap);
                map.setMapTypeId('map_style');

                nodeDisplay();  
            }       

            function nodeDisplay()
            {
                var drawNode;

                for(var i in nodeInfo)
                {   
                    if(i >= 1)
                    {
                        if(nodeSelect == true)
                        {
                            drawNode = {
                                strokeColor: '#0000FF',
                                fillColor: '#0000FF',
                                strokeWeight: 2,
                                fillOpacity: 1,
                                map: map,
                                center: nodeInfo[i].center,
                                radius: 4,
                                visible: true
                            };
                        }
                        else
                        {
                            drawNode = {
                                strokeColor: '#0000FF',
                                fillColor: '#0000FF',
                                strokeWeight: 2,
                                fillOpacity: 1,
                                map: map,
                                center: nodeInfo[i].center,
                                radius: 4,
                                visible: false
                            };
                        }
                    }
                    else
                    {
                        drawNode = {
                            strokeColor: '#FF0000',
                            fillColor: '#FF0000',
                            strokeWeight: 2,
                            fillOpacity: 1,
                            map: map,
                            center: nodeInfo[i].center,
                            radius: 6
                        };
                    }

                    node[i] = new google.maps.Circle(drawNode);
                    attachMessage(i);
                }
            }

            function clearOverlays()
            {
                for(var i in nodeInfo)
                {
                    if(i > 0)
                    {
                        node[i].setMap(null);
                    }
                }
            }

            function attachMessage(number)
            {
                var message = "Hello. This is node number " + number + ".";
                var infowindow = new google.maps.InfoWindow({
                    size: new google.maps.Size(50, 50)
                });

                infowindow.content = message;

                google.maps.event.addListener(node[number], 'click', function()
                {
                    //infowindow.open(map, node[number]);
                    clearOverlays();
                    nodeSelect = !nodeSelect;
                    nodeDisplay();
                });     
            }

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

Answer 1

Fade the circles in (start at zero, end at one):

function polygon_fadein(polygon, seconds, callback){
    polygon.setOptions({fillOpacity:0, strokeOpacity:0});
    //  The "fade task" runs every 50 ms, seconds is the total time to fade,
    //   multiplied by approximately 1000 to turn it into milliseconds.
    var fill = 50/(seconds*999);
    var stroke = 50/(seconds*999);
    var fadein = setInterval(function(){
        if((polygon.get("strokeOpacity") > 0.99) &&  (polygon.get("fillOpacity") > 0.99)){
            clearInterval(fadein);
            if(typeof(callback) == 'function')
                callback();
            return;
        }
        polygon.setOptions({
            'fillOpacity': Math.min(1.0, polygon.fillOpacity+fill),
            'strokeOpacity': Math.min(1.0, polygon.strokeOpacity+stroke)
        });
    }, 50);
}

code snippet:

 var nodeSelect = true; // Boston 42.3584308, -71.0597732 var lat = [42.350542, 42.353036, 42.358249, 42.350101, 42.350190, 42.3634819]; var lon = [-71.074856, -71.059052, -71.057507, -71.087478, -71.059300, -71.0686226]; var nodeInfo = []; var node = []; var map = null; function initialize() { for (var num = 0; num < lat.length; num++) { nodeInfo[num] = { center: new google.maps.LatLng(lat[num], lon[num]) } } var styledMap = new google.maps.StyledMapType(styles, { name: "Styled Map" }); // Options for map var mapOptions = { center: new google.maps.LatLng(42.35791, -71.063157), zoom: 15, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] } }; map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); map.mapTypes.set('map_style', styledMap); map.setMapTypeId('map_style'); nodeDisplay(); } function nodeDisplay() { var drawNode; for (var i in nodeInfo) { if (i >= 1) { if (nodeSelect == true) { drawNode = { strokeColor: '#0000FF', fillColor: '#FF0000', //'#0000FF', strokeWeight: 2, fillOpacity: 1, map: map, center: nodeInfo[i].center, radius: 40, visible: true }; } else { drawNode = { strokeColor: '#0000FF', fillColor: '#FF0000', //'#0000FF', strokeWeight: 2, fillOpacity: 1, map: map, center: nodeInfo[i].center, radius: 40, visible: false }; } } else { drawNode = { strokeColor: '#FF0000', fillColor: '#FF0000', strokeWeight: 2, fillOpacity: 1, map: map, center: nodeInfo[i].center, radius: 60 }; } node[i] = new google.maps.Circle(drawNode); polygon_fadein(node[i], 5); attachMessage(i); } } function clearOverlays() { for (var i in nodeInfo) { if (i > 0) { node[i].setMap(null); } } } function attachMessage(number) { var message = "Hello. This is node number " + number + "."; var infowindow = new google.maps.InfoWindow({ size: new google.maps.Size(50, 50) }); infowindow.setContent(message); google.maps.event.addListener(node[number], 'click', function() { infowindow.setPosition(node[number].getCenter()); infowindow.open(map); }); } function polygon_fadein(polygon, seconds, callback) { polygon.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); var fill = 50 / (seconds * 999); var stroke = 50 / (seconds * 999); var fadein = setInterval(function() { if ((polygon.get("strokeOpacity") > 0.99) && (polygon.get("fillOpacity") > 0.99)) { clearInterval(fadein); if (typeof(callback) == 'function') callback(); return; } polygon.setOptions({ 'fillOpacity': Math.min(1.0, polygon.fillOpacity + fill), 'strokeOpacity': Math.min(1.0, polygon.strokeOpacity + stroke) }); }, 50); } google.maps.event.addDomListener(window, 'load', initialize); // Styles var styles = [{ stylers: [{ hue: "#2222EE" }, { saturation: -40 }] }, { featureType: "road", elementType: "geometry", stylers: [{ lightness: 100 }, { visibility: "simplified" }] }, { featureType: "road", elementType: "labels", stylers: [{ visibility: "off" }] }, { featureType: "transit.station.bus", elementType: "labels.icon", stylers: [{ visibility: "off" }] }]; 

 html, body, #map_canvas { margin: 0; padding: 0; height: 100%; } 

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map-canvas" style="height: 600px; width:800px;"></div> <div id="polygonCoords"></div> 

(original code in the question most likely from: Is there a way to fade out a V3 google.maps.Polygon? )