CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
AshClarke
AshClarke

Reputation: 3078

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 inside a function. 

    <!DOCTYPE html>
    <html>
      <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100%% }
      body { height: 100%%; margin: 0; padding: 0 }
      #map_canvas { height: 100%% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
    </script>
    <script type="text/javascript">
      var centerlatlng = new google.maps.LatLng(-27.467726,153.026633);
      function initialize() {
        var mapOptions = {
          center: centerlatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);

        var marker = new google.maps.Marker({
                                            position: centerlatlng,
                                            map: map,
                                            title:"Hello World!"});   

        google.maps.event.addDomListener(map, 'click', updateCircle);
        google.maps.event.addDomListener(map, 'rightclick', removeRadius);

    function removeRadius(){
        radius.setMap(null);}

    function updateCircle(){
        var radius = new google.maps.Circle({map: map,
                                            radius: 400,
                                            center: centerlatlng,
                                            fillOpacity: 0});}      
    }

    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:50%%; height:50%%"></div>
  <body>
</html>

Upvotes: 0

Views: 4231

Answers (3)

swapnil udare
swapnil udare

Reputation: 221

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.

Upvotes: 0

Joachim Isaksson
Joachim Isaksson

Reputation: 181047

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, ...

Upvotes: 1

Marcelo
Marcelo

Reputation: 9407

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

//Global variables
var 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});}      
    }

Upvotes: 2

Related Questions