Is there a way to make overlay objects non-clickable? - google-maps-api-3

Question

I'm working on this project of mine that requires to define lat/lng elements by clicking and finally found a way to do so, but just discovered, that the already predefined elements interfere with the new overlay elements defining by the source below. So I looked and looked, and searched, and googled, but wasn't able to find any helpful info about that: is there a way to make the google maps overlays non-clickable?
I'm using a custom function to get the latitude and longitude of a click event and place a predefined circle overlay object. However if I have already predefined overlay elements, I cannot click on top of them to set a new overlay element. I.e. I'd need either to make them non-interactable or non-clickable, or just to set them on a different layer, so that they don't interfere with the click events for the new elements.
Here's the JS I use:
<script type="text/javascript">
var map;
var markersArray = []; //the array for the newly defined objects
function initMap()
{
var latlng = new google.maps.LatLng(41, 29);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// add a click event handler to the map object
google.maps.event.addListener(map, "click", function(event)
{
// place a marker
placeMarker(event.latLng);
});
// I've predefined a couple of markers just to see how it works with already defined elements and discovered this interference that I mentioned above
var mar1 = new google.maps.LatLng(40.9653, 29.3705);
var marker1 = new google.maps.Circle({
center: mar1,
radius: 2500,
fillColor: "#FF0000",
strokeWeight: 0,
fillOpacity: 0.35,
map: map
});
var mar2 = new google.maps.LatLng(40.9664, 29.3252);
var marker2 = new google.maps.Circle({
center: mar2,
radius: 2500,
fillColor: "#FF0000",
strokeWeight: 0,
fillOpacity: 0.35,
map: map
});
marker1.setMap(map);
marker2.setMap(map);
}
function placeMarker(location) {
// first remove all new markers if there are any, so that we define one new at a time
deleteOverlays();
var new_marker = new google.maps.Circle({
center: location,
radius: 2500,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35,
//position: location,
map: map
});
// add marker in markers array
markersArray.push(new_marker);
}
// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
fiddle

Answer 1

set {clickable: false} in the CircleOptions.
var new_marker = new google.maps.Circle({
center: location,
radius: 2500,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35,
clickable: false, // <=====================
map: map
});
Modified jsfiddle