title: zIndex doesn't change z order for circles with Google Maps API
body: <p>Pardon my noobishness, but, although I've seen this issue discussed, I haven't found an answer. I am trying to draw concentric circles on a Google Map using the API v3, making each clickable as on a bullseye target, but always the largest one ends up on top, which means it is the only clickable one.</p>
  
  <p>The following uses an array called "subjects" that consists of increasing radii and various fillcolors.</p>
  
  <pre><code>for (i=0;i&lt;subjects.length;i++) {
   radi = subjects[i][0];
   fillcolr = subjects[i][1];
   zindx = subjects.length - i;
   newcircle = new google.maps.Circle({
          radius: radi, 
          center: centerPoint, 
          strokeWidth: 1,  
          fillOpacity: 1.0,
          fillColor: fillcolr,
          zIndex: zindx
      }); 
      // display it
      newcircle.setMap(map);
      // make outer circle clickable
      google.maps.event.addListener(newcircle, 'click', function() {
                  circleClickedInfo(i);
           });
  </code></pre>
  
  <p>The circles are there, the zIndex is set, but the biggest circle is always on top. I have tried setting zIndex on a pass afterwards, boosting each zIndex by 10000, reversing the order in which I create the circles, not setting the zIndex explicitly, etc. I'm sure I am missing something obvious (see the aforementioned noobishness), but I can't figure out what it is. TIA for any pointers...</p>