title: Clear circles in google maps
body: <p>I'm trying to remove some circles from a map but isn't working as expected. Here are my code.</p>
  
  <p>Function I have used to draw circles:</p>
  
  <pre><code>for (var city in citymap) {
      var circleOptions = {
        map: GoogleMap,
        radius: distance, //In meters
        strokeColor: circleColor,
        fillOpacity: 0.0,
        strokeWeight: circleWeight,
        strokeOpacity: 0.5,
        center: citymap[city].center,
        };
      // Add the circle for this city to the map.
  
      cityCircle[circleId] = new google.maps.Circle(circleOptions);
  }
  </code></pre>
  
  <p>Looking at the cityCircle Array I have eight elements, from 0 to 7. I tryed to remove them using the following function grabbed here stackoverflow forum:</p>
  
  <pre><code>function RemoveOverlays(overlays) {
      for (var i = 0; i &lt; overlays.length; i++) {
          overlays[i].setMap(null);
      }
  </code></pre>
  
  <p>I call the function inside of an else if loop like this:</p>
  
  <pre><code>else if  (zoom &lt;6 ){
     if (typeof cityCircle[0] !=undefined &amp;&amp; cityCircle[0] !=null) {
      RemoveOverlays(cityCircle)
     }
  }
  </code></pre>
  
  <p>At the end I have just the latest drawn circle removed. What I'm doing wrong? Thanks!</p>
  
  <hr>
  
  <p>Here is the entire code.</p>
  
  <pre><code>// Listeners for newly created Map
  google.maps.event.addListener(GoogleMap, 'center_changed', function() {
        localStorage['CenterLat'] = GoogleMap.getCenter().lat();
        localStorage['CenterLon'] = GoogleMap.getCenter().lng();
  });
  
  google.maps.event.addListener(GoogleMap, 'zoom_changed', function() {
        localStorage['ZoomLvl']  = GoogleMap.getZoom();
          var zoom = GoogleMap.getZoom(); //gets zoom level.
  
          if (SiteCircles &amp;&amp; zoom &gt;=6) {
             for (var i=0;i&lt;SiteCirclesDistances.length;i++) {
              for (var circleId=0; circleId &lt; size; circleId++) {
              drawCircle(marker, SiteCirclesDistances[i], circleId); // in meters
              }
             }
          } else if  (zoom &lt;6 ){
                 if (typeof cityCircle[index] !="undefined" &amp;&amp; cityCircle.length &gt;0) {
                  RemoveOverlays(cityCircle)
                  }
              }
          });
  
          // Add home marker if requested
      if (SiteShow &amp;&amp; (typeof SiteLat !==  'undefined' || typeof SiteLon !==  'undefined')) {
          for (var city in citymap) {
          var siteMarker  = new google.maps.LatLng(citymap[city].SiteLat, citymap[city].SiteLon);
      var markerImage = circleImage; //Defined on config.js
  
                  var marker = new google.maps.Marker({
              position: siteMarker,
              map: GoogleMap,
              icon: {url:markerImage, scaledSize: new google.maps.Size(32, 32)},
              title: citymap[city].title,
              zIndex: -99999
           });
      }
  
  function drawCircle(marker, distance, circleId) {
      if (typeof distance === 'undefined') {
          return false;
  
          if (!(!isNaN(parseFloat(distance)) &amp;&amp; isFinite(distance)) || distance &lt; 0) {
              return false;
          }
      }
  
      distance *= 1000.0;
      if (!Metric) {
          distance *= 1.852;
      }
  
  //Create range circles
  
      for (var city in citymap) {
            var circleOptions = {
            map: GoogleMap,
        radius: distance, //In meters
        strokeColor: circleColor,
        fillOpacity: 0.0,
        strokeWeight: circleWeight,
        strokeOpacity: 0.5,
        center: citymap[city].center,
        };
      // Add the circle for this city to the map.
  
      cityCircle[circleId] = new google.maps.Circle(circleOptions);
  
    }
  
  }
  </code></pre>