title: Google Maps API V3: Make the circle of the radius search markers clickable
body: <p>I'd like to make the circle of the radius search function clickable. I just would like to add this, when you click on the circle, the bounds of the map should fit the circle position.</p>
  
  <p>So I made the following changes without success:</p>
  
  <ol>
  <li>Make the circle clickable: add <em>clickable: true,</em></li>
  <li>Add an event listener: <em>google.maps.event.addListener(circle, 'click', function() {map.fitBounds(circle.getBounds()); });</em></li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function codeAddress() {
          var address = document.getElementById('address').value;
          var radius = parseInt(document.getElementById('radius').value, 10)*1000;
          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              side_bar_html = "";
              map.setCenter(results[0].geometry.location);
              var searchCenter = results[0].geometry.location;
              /*
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location
              });
              */
              if (circle) circle.setMap(null);
              circle = new google.maps.Circle({center:searchCenter,
                                               radius: radius,
                                               fillOpacity: 0.35,
                                               fillColor: "#FF0000",
                                               clickable: true,
                                               map: map});
              var bounds = new google.maps.LatLngBounds();
       var foundMarkers = 0;
              for (var i=0; i&lt;gmarkers.length;i++) {
                if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) &lt; radius) {
                  bounds.extend(gmarkers[i].getPosition())
                  gmarkers[i].setMap(map);
                  // add a line to the side_bar html
                  side_bar_html += '&lt;a href="javascript:myclick(' + i + ')"&gt;' + gmarkers[i].title + '&lt;\/a&gt;&lt;br&gt;';
    foundMarkers++;
                } else {
                  gmarkers[i].setMap(null);
                }
              }
              // put the assembled side_bar_html contents into the side_bar div
              document.getElementById("side_bar").innerHTML = side_bar_html;
              if (foundMarkers &gt; 0) {
                map.fitBounds(bounds);
       } else {
                map.fitBounds(circle.getBounds());
              }
              // makeSidebar();
              // google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);
  
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
          });
    
     google.maps.event.addListener(circle, 'click', function() {
              map.fitBounds(circle.getBounds());
          });
    
        }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks for your help</p>