CODEWITHSUNDEEP
javascriptcssgoogle-mapsgoogle-maps-api-3
Beginner
Beginner

Reputation: 77

Google maps API Animate polygon color change

I found this great sample from Google about making polygons become colorful on mouse hover.

What I need is to make a polygon over a number of countries, for example: USA, Canada, and Mexico, and make them animate a color change on hover, animate restoration of the original color on leave, and on click, return country name and zoom in to the country. I already started, but immediately got stuck.

Can anyone help me with this task?

Upvotes: 2

Views: 1736

Answers (1)

user7375280
user7375280

Reputation: 41

Maybe a little too late but for anyone else having same question:

    (function(){
        var opacityUp =true;
        var animOpacity = 0.1;
        var animStep = 0.005;
        function animatePolygons() {
            if(opacityUp) {
                animOpacity+=animStep;
                if(animOpacity>=0.99) {
                    opacityUp = false;
                }
            } else {
                animOpacity-=animStep;
                if(animOpacity<=0.1) {
                    opacityUp = true;
                }
            }
                polygon.setOptions({
                    fillOpacity: animOpacity
                });
            requestAnimationFrame(animatePolygons);
        };
        animatePolygons();
    })();

Upvotes: 4

Related Questions