Google Maps API v3 Hiding and showing a circle on checkbox click

Question

i would hide/show a circle on gmaps, on checkbox click.

Map is created on document ready. My code add the circle, but doesn't remove/hide. On new checkbox click it creates a new circle, not removing the old one.

I suppose it's a scope question, could anyone help me?

thanks in advance

this is my code

$( "#ck_radar" ).click(function() {

        var markerOptions = {
                title: "Tu sei qui",
                icon: "http://maps.google.com/mapfiles/marker_green.png",
                position: {lat: 38.132687, lng: 13.321929},
                map: $("#bigmap").gmap3("get")
                }

                var marker = new google.maps.Marker(markerOptions);

                    circle = new google.maps.Circle({
                    strokeColor: "#FF0000",
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: "#FFFFF",
                    fillOpacity: 0.35,
                    map: $("#bigmap").gmap3("get"),
                    radius: 500,
                    tag:"acircle",
                    id:"circ"
                });


        if($(this).is(':checked')){         

                circle.bindTo('center', marker, 'position');
                alert(circle.radius);


        }else{

        $('#bigmap').gmap3({
            clear: {
                id:"circ"
            }
        });


        }

    });

Answer 1

resolved, the mistake was in scoping, as supposed.

$( "#ck_radar" ).click(function() {


    if($(this).is(':checked')){         

 var markerOptions = {
            title: "Tu sei qui",
            icon: "http://maps.google.com/mapfiles/marker_green.png",
            position: {lat: 38.132687, lng: 13.321929},
            map: $("#bigmap").gmap3("get")
            }

            var marker = new google.maps.Marker(markerOptions);

                circle = new google.maps.Circle({
                strokeColor: "#FF0000",
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "#FFFFF",
                fillOpacity: 0.35,
                map: $("#bigmap").gmap3("get"),
                radius: 500,
                tag:"acircle",
                id:"circ"
            });
            circle.bindTo('center', marker, 'position');



    }else{

    $('#bigmap').gmap3({
        clear: {
            id:"circ"
        }
    });


    }

});