Google Maps Circles Animation

Question

I'm developing a script to encourage the growth / reduction of the radius of a circle in the Google Maps API. But only 1 circle is the one that is animated, first I scroll the array drawing the circles in the map followed by I give animation (reduction and enlargement) of the radius. The solution might be to include an interval within the loop. I look forward to your help, thank you.

    function initialize() {
    var _radius = 500;
    var rMin = _radius * 4/5;
    var rMax = _radius;
    var direction = 1;
 
       
        var citymap = {  chicago: {    center: {lat: -12.008711, lng: -77.053376} },  newyork: {  center: {lat: -12.01075, lng: -77.070083} },  losangeles: { center: {lat: -12.005359, lng: -77.06835} },  vancouver: { center: {lat: -11.990886, lng: -77.068101} }};
        var mapOptions = {
            center: {lat:  -12.004129, lng: -77.056904},
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("map"),
                        mapOptions);
        
    for (var city in citymap) {
            var circleOption = {
        center: citymap[city].center,
        fillColor: '#3878c7',
        fillOpacity: 0.6,
        map: map,
        radius: 500,
        strokeColor: '#3878c7',
        strokeOpacity: 1,
        strokeWeight: 0.5
    };
      var circle = new google.maps.Circle(circleOption);
    }
      
        var circleTimer = setInterval(function(){
        var radius = circle.getRadius();
        
        if ((radius > rMax) || (radius < rMin)) {
            direction *= -1;
        }        
        var _par = (radius/_radius)-0.7;
        
        circleOption.radius = radius + direction * 10;
        circleOption.fillOpacity = 0.6 * _par;
        
        circle.setOptions(circleOption);
    }, 20);
    } 
  
  
  

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map { height: 90%; width: 90% }
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script-->
    
<script type="text/javascript">

</script>
</head>

<body>
    <div id='map'></div>
</body>
</html>

Thank You Regards

possible duplicate of [Fade In circles in Google Maps](http://stackoverflow.com/questions/18235674/fade-in-circles-in-google-maps) — geocodezip, Jan 07 '17 at 05:10
possible duplicate of [How do I fade out a circle in a Google Map, x seconds after I've added it to the map?](http://stackoverflow.com/questions/14052580/how-do-i-fade-out-a-circle-in-a-google-map-x-seconds-after-ive-added-it-to-the) — geocodezip, Jan 07 '17 at 05:11
possible duplicate of [Circle fade out over time on Google Map](http://stackoverflow.com/questions/28198415/circle-fade-out-over-time-on-google-map) — geocodezip, Jan 07 '17 at 05:12

geocodezip · Accepted Answer · 2020-08-14T12:59:08.500

You only create the setInterval function for the last "city" whose circle you create. One option for solving this is to use function closure to associate the setInterval function and the circle:

for (var city in citymap) {
  createCircle(citymap[city], map);
}

function createCircle(city, map) {
  var _radius = 500;
  var rMin = _radius * 4 / 5;
  var rMax = _radius;
  var direction = 1;
  var circleOption = {
    center: city.center,
    fillColor: '#3878c7',
    fillOpacity: 0.6,
    map: map,
    radius: 500,
    strokeColor: '#3878c7',
    strokeOpacity: 1,
    strokeWeight: 0.5
  };
  var circle = new google.maps.Circle(circleOption);

  var circleTimer = setInterval(function() {
    var radius = circle.getRadius();

    if ((radius > rMax) || (radius < rMin)) {
      direction *= -1;
    }
    var _par = (radius / _radius) - 0.7;

    circleOption.radius = radius + direction * 10;
    circleOption.fillOpacity = 0.6 * _par;

    circle.setOptions(circleOption);
  }, 20);
}

proof of concept fiddle

code snippet:

function initialize() {

  var citymap = {
    chicago: {
      center: {
        lat: -12.008711,
        lng: -77.053376
      },
      fillColor: "red"
    },
    newyork: {
      center: {
        lat: -12.01075,
        lng: -77.070083
      },
      fillColor: "blue"
    },
    losangeles: {
      center: {
        lat: -12.005359,
        lng: -77.06835
      },
      fillColor: "green"
    },
    vancouver: {
      center: {
        lat: -11.990886,
        lng: -77.068101
      },
      fillColor: "orange"
    }
  };
  var mapOptions = {
    center: {
      lat: -12.004129,
      lng: -77.056904
    },
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

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

  for (var city in citymap) {
    createCircle(citymap[city], map);
  }
}
google.maps.event.addDomListener(window, "load", initialize);

function createCircle(city, map) {
  var _radius = 500;
  var rMin = _radius * 4 / 5;
  var rMax = _radius;
  var direction = 1;
  var circleOption = {
    center: city.center,
    fillColor: city.fillColor,
    fillOpacity: 0.6,
    map: map,
    radius: 500,
    strokeColor: '#3878c7',
    strokeOpacity: 1,
    strokeWeight: 0.5
  };
  var circle = new google.maps.Circle(circleOption);

  var circleTimer = setInterval(function() {
    var radius = circle.getRadius();

    if ((radius > rMax) || (radius < rMin)) {
      direction *= -1;
    }
    var _par = (radius / _radius) - 0.7;

    circleOption.radius = radius + direction * 10;
    circleOption.fillOpacity = 0.6 * _par;

    circle.setOptions(circleOption);
  }, 20);
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

Google Maps Circles Animation

1 Answers1