Question

I can’t for the life of me figure out why setMap(null) doesn’t work. I am really upset how much documentation there is on adding overlays with bindTo, but not a single word about how to remove it. What am I doing wrong?

I’m creating the circle on the .radius_type click. Then when I toggle the drop down to a different shape, it won’t remove the circle.

I’m calling the map like:

var map = new google.maps.Map(document.getElementById('map'), {...}

// this toggles the shapes, but I can't get it to remove the circle for the marker
$('.radius_type.selectee').click(function(){
      var shape = $(this).find('span').html();
      var opts= {...};

    switch(shape){
        case 'circle':  // Here is the added circle to the second marker.
            var circle = new google.maps.Circle(opts);
            circle.setOptions({radius:17063,map:map});
            circle.bindTo('center',markers[1],'position');

            // It binds, now how to remove it?

            break;

        case 'square':
            //tried - circle.setMap(null);
            //tried - map.setMap(null);
            //tried - google.map.event.setMap(null);
            //tried - every web page on the topic.
            //
            // I don't understand how to unbind the circle from the marker.
            var rect = new google.maps.rect(opts);

            break;

        case 'draw':
            draw.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
            break;
    }
});

Answer 1

use $('element').on('change',function()) to remove the circle