jquery-gmap3

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


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"
            }
        });


        }

    });

Solution

  • 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"
            }
        });
    
    
        }
    
    });