Show radius when click on marker - google-maps-api-3

Question

I want to click on the google marker which will show the google circle (radius). Not sure if the placement of addListener is wrong or am I missing some stuff.
coordinates = [
['Tan Tock Seng Hospital', {lat: 1.3213762, lng: 103.8457089}],
['Singapore General Hospital', {lat: 1.279421747, lng: 103.8345482}],
['Changi General Hospital', {lat: 1.340825885, lng: 103.9494655}],
['Khoo Teck Puat Hospital', {lat: 1.424081019, lng: 103.838578}],
['Ng Teng Fong General Hospital', {lat: 1.333463114, lng: 103.7455669}],
['National University Hospital', {lat: 1.29442026, lng: 103.7836869}]
];
for (var i = 0; i < coordinates.length; i++) {
// Google Marker for Hospital Coordinates
marker = new google.maps.Marker({
position: coordinates[i][1],
map: map,
icon: 'https://maps.google.com/mapfiles/kml/paddle/blu-stars.png',
title: coordinates[i][0]
});
marker_radius = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0,
map: map,
center: coordinates[i][1],
radius: 2000, // in metres
clickable: false
});
marker_radius.setVisible(true); // set circle to invisible
marker_radius.bindTo('center', marker, 'position'); // binds the circle to marker
google.maps.event.addListener(marker, 'click', function() {
marker_radius.setVisible(getVisible() ? false : true);
});
}

Answer 1

You need to use a closure in your event listener:
google.maps.event.addListener(marker, 'click', (function(marker, marker_radius) {
return function () {
marker_radius.setVisible(marker_radius.getVisible() ? false : true);
}
})(marker, marker_radius));
Read here for more information.
Also your Javascript console should tell you that getVisible() is not defined. So you need to change it to marker_radius.getVisible().