title: Overlapping circles blocking mouseover event - Google maps v3
body: <p>I have in my code an overlapping circles where within a larger circle have four other smaller circles and within these four other circles have countless other smaller circles yet.
  The method that creates such circles read a different array for each of the three types, thus created a method for the mouseover and mouseout event of the circles, call in the creation thereof.
  My problem: The event running only in the smaller circles.
  When I comment on the call of the creation of others and perform the creation of a for individulamente they work, but not together.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Simple Map&lt;/title&gt;
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
    html, body, #map-canvas {
      height: 100%;
      margin: 0px;
      padding: 0px
    }
  &lt;/style&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=true"&gt;&lt;/script&gt;
  &lt;script&gt;
  var map;
  function initialize() {
  var mapOptions = {
     zoom: 12,
     center: new google.maps.LatLng(-23.513262, -46.679159)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);
  
  setMarkers(map, posMarkers);//seta os marcadores no mapa
  setCircleSituacao(map);
  setCircleAtributos(map, posAtributos); 
  }
  
  var posMarkers = [//posição dos marcadores
  //Desc. Tamanho     Latitude      Longitude     Porc. Certeza         
  ['', 2.3, -23.5271607576621, -46.6441416362914, 0.4],
  ['', 2  , -23.5362891381086, -46.6501497844848, 0.5],
  ['', 1.6, -23.5329841079852, -46.6528963665160, 0.9],
  ['', 3.6, -23.5245637751079, -46.6618227581176, 0.7],
  ['', 3.9, -23.5241515920418, -46.6649126629028, 0.9],
  ['', 3.8, -23.5355809243579, -46.6698908428344, 0.9],
  ['', 1.5, -23.5288733551745, -46.6758131603393, 0.5],
  ['', 1.8, -23.5202166600303, -46.6712641338500, 0.1],
  ['', 2.3, -23.5211610544407, -46.6809630016479, 0.2],
  ['', 2.9, -23.5164390146409, -46.6843962291869, 0.1]
  ];
  
  var posAtributos = [//posição dos marcadores
  //quem?         Onde lat   Onde Long  Resultado Cor    transpa.     
  ['Vitima'   , -23.491965, -46.648780, 25.4, '#81F781', 0.5],//direita superior
  ['Local'    , -23.488000, -46.698159, 28.8, '#5858FA', 0.9], //esquerda superior
  ['Objeto'   , -23.529340, -46.706000, 30.5, '#DF0101', 0.8], //esquerda inferior
  ['Criminoso', -23.527000, -46.655000, 35.0, '#F4FA58', 0.7] //direita inferior
  ];
  
  function setMarkers(map, dArray) {//função que seta os marcadores
  for (var i = 0; i &lt; dArray.length; i++) {
      var infoArray = dArray[i];
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(infoArray[2], infoArray[3]),
          draggable: true,
          map: map,
          title: infoArray[0],
          visible: false
      });
      setCircle(map, marker, infoArray);
    }
   }
  
  function setCircle(map, marker, infoArray) {
  draw_circle = new google.maps.Circle({
      center: new google.maps.LatLng(infoArray[2], infoArray[3]),
      radius: infoArray[1] * 100,
      strokeColor: "#000",
      strokeOpacity: 0.4,
      strokeWeight: 1,
      fillColor: "#A4A4A4",
      fillOpacity: infoArray[4],
      map: map
  });
  
  setMouseOverEvent();
  }
  
  function setCircleAtributos(map, attr) {
  for (var i = 0; i &lt; attr.length; i++) {
      var atrib = attr[i];
      draw_circle = new google.maps.Circle({
          center: new google.maps.LatLng(atrib[1], atrib[2]),
          radius: atrib[3] * 100,
          strokeColor: "#000",
          strokeOpacity: 0.4,
          strokeWeight: 1,
          fillColor: atrib[4],
          fillOpacity: atrib[5],
          map: map
      });
  }
  
  setMouseOverEvent();
  }
  
  function setCircleSituacao(map) {
  draw_circle = new google.maps.Circle({
      center: new google.maps.LatLng(-23.513262, -46.679159),
      radius: 7000,
      strokeColor: "#000",
      strokeOpacity: 0.8,
      strokeWeight: 1,
      fillColor: "#FFFFFF",
      fillOpacity: 0.3,
      map: map
  });   
  
  setMouseOverEvent();
  }
  
  function setMouseOverEvent(){
  google.maps.event.addListener(draw_circle, 'mouseover', function(e){
      this.setOptions({fillColor: "#000"});
  });
  
  google.maps.event.addListener(draw_circle, 'mouseout', function(e){
      if (setCircleSituacao){
          this.setOptions({fillColor: "#FFFFFF"});
      } else
      if (setCircleAtributos){
          this.setOptions({fillColor: "#000"});
      } else
      if (setCircle){
          this.setOptions({fillColor: "#A4A4A4"});
      }
  });
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  &lt;/script&gt;
  &lt;/head&gt;
     &lt;body&gt;
         &lt;div id="map-canvas"&gt;&lt;/div&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>