Toggling Circle On Marker Click

I have some markers that are placed via an array of cords. Around these markers I have radius circles. I am trying to only display the circles when the associated marker is clicked

Solution 1:

The following does what you describe: I understood you only want one circle showing at any given time. If that's not the case please comment and I will do my best to rectify.

Click here for the jsFiddle Demo

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image
  });

  var openCircle;  // declare the circle

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    returnfunction() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);

      if (openCircle !== undefined) {
        openCircle.setMap(null);
      }

      openCircle = new google.maps.Circle({
        map: map,
        radius: 4828,    // metresstrokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
      });

      openCircle.bindTo('center', marker, 'position');

      google.maps.event.addListener(infowindow,'closeclick',function(){
        openCircle.setMap(null);
      }); 
    }
  })(marker, i));

  // remove what's below/*
  var circle = new google.maps.Circle({
    map: map,
    radius: 4828,    // metres
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
  });

     circle.bindTo('center', marker, 'position');
     */

}