Show radius circle on click - Google Maps

Question

I am trying to add a radius circle around a marker on click. I can get the circle to appear without any issues. I have put the circle within it's own function and then attached it to a click event. For some reason it does not seem to work though. Can anyone shine any light on the situation please?

JSFiddle DEMO http://jsfiddle.net/yV6xv/3729/

var circle, map;
        function initialize()   
        {
            var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);

            map = new google.maps.Map(document.getElementById('map'), {
                'zoom': 6,
                'center': centerLatlng,
                'mapTypeId': google.maps.MapTypeId.ROADMAP
            });

            // Marker Icons Implementation
               markers = new google.maps.Marker({
                position: centerLatlng,
                map: map,
                title: 'Center of Map'
            });
            // Add click event listenecal
            calcRadius(60000);
        };

        function calcRadius(radiusVal)
        {
            //console.log(document.getElementById("#radioBtn1").value);

            google.maps.event.addListener(map, "click", function () {

                 circle = new google.maps.Circle({
                  map: map
                  radius : 9000,
                  strokeColor : '#BBD8E9',
                  strokeWeight : 2
                });

                console.log(circle);

                circle.bindTo('center', marker, 'position');
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Add the click listener to the marker.

updated fiddle

Code:

    var circle, map;
    function initialize()   
    {
        var centerLatlng = new google.maps.LatLng(38.061067,-104.414062);
      
        map = new google.maps.Map(document.getElementById('map'), {
            'zoom': 6,
            'center': centerLatlng,
            'mapTypeId': google.maps.MapTypeId.ROADMAP
        });
        
        // Marker Icons Implementation
        markers = new google.maps.Marker({
            position: centerLatlng,
            map: map,
            title: 'Center of Map'
        });
        // Add click event listenecal
        calcRadius(markers, map, 60000);
    };

    function calcRadius(marker, map, radiusVal)
    {
        //console.log(document.getElementById("#radioBtn1").value);
      
        google.maps.event.addListener(marker, "click", function () {

             circle = new google.maps.Circle({
              map: map,
              fillColor : '#BBD8E9',
              fillOpacity : 0.3,
              radius : radiusVal,
              strokeColor : '#BBD8E9',
              strokeOpacity : 0.9,
              strokeWeight : 2
            });

            // console.log(circle);

            circle.bindTo('center', marker, 'position');
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

example of changing the radius with a drop down