Remove Google Maps Circle Overlay Within Function

I've redone this code so it's shorter, but basically I'm trying to add a circle with left click and remove it with right click. The radius.setMap(null) works only if it's not insid

Solution 1:

Your radius variable is local to the function updateCircle(). Make it global instead.

//Global variablesvar centerlatlng = new google.maps.LatLng(-27.467726,153.026633);
var radius;


function updateCircle(){
      // do not use the 'var' keyword here
        radius = new google.maps.Circle({map: map,
                                            radius: 400,
                                            center: centerlatlng,
                                            fillOpacity: 0});}      
    }

Solution 2:

radius is declared locally in the function updateCircle(), so it cannot be used in removeRadius().

If you move the declaration from updateCircle() into the containing function initialize(), both updateCircle() and removeRadius() will be able to see it without making it global;

function initialize() {
    var radius;
    var mapOptions = {...

    function updateCircle(){
        radius = new google.maps.Circle({map: map, ...

Solution 3:

You can use this in google map V3:

var shape=null;

google.maps.event.addDomListener(drawingManager, "circlecomplete", function(circle) {
    shape=circle;
});

after assigning variable for this when you want to remove this circle just call this function:

function removeOverlay {
    shape.setMap(null);
}

you just have to save an object returned by google in a specific variable......

hope this will help you.