Home/ Questions/Q 6106329
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:04:04+00:00

I am trying to figure out how to clear circles off the map that

  • 0

I am trying to figure out how to clear circles off the map that allows users to draw a radius around a point. My clearMap function doesn’t seem to work. See code below

<!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: 0px; padding: 0px }  
    #map_canvas { height: 100% } 
</style> 
<script type="text/javascript"   
 src="http://maps.google.com/maps/api/js?sensor=false"> 
 </script> 


</script>
<script type= "text/javascript">

var geocoder;   
var map;  
var count=0;
//Store points in array 
var points = [];



function initialize() {    
    geocoder = new google.maps.Geocoder();     
    var latlng = new google.maps.LatLng(-34.397, 150.644);    
    var myOptions = {       
    zoom: 3,      
    center: latlng,       
    mapTypeId: google.maps.MapTypeId.ROADMAP    
    }     
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);  
}    
function codeAddress() {    
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {       
    if (status == google.maps.GeocoderStatus.OK) {         
    map.setCenter(results[0].geometry.location);        
    var marker = new google.maps.Marker({          
        map: map,             
        position: results[0].geometry.location
        }); 

    }
    else {        
    alert("Geocode was not successful for the following reason: " + status);       
    }     
    });   
    }
function plusCount(){
if (count==2){
count=0;
}
else{
count=count +1;
}
}   

function drawCircle() {
var address=document.getElementById("address").value;
var radius=document.getElementById("radius").value;
var latitude=40;
var longitude=0;
geocoder.geocode( { 'address': address}, function(results, status){
if (status==google.maps.GeocoderStatus.OK){
latlng=(results[0].geometry.location);
latitude=latlng.lat();
longitude=latlng.lng();
alert(latitude);
alert(longitude);
alert (radius);
}   

else{
    alert("Geocode was not successful for the following reason: " + status);
}
});





//Degrees to radians 
  var d2r = Math.PI / 180;
  alert("calc d2r " + d2r);
 //  Radians to degrees
 var r2d = 180 / Math.PI;
 alert("calc r2d " + r2d);
// Earth radius is 3,963 miles
 var cLat = (radius / 3963) * r2d;
alert("calc cLat " + cLat);
  var cLng = cLat / Math.cos(latitude * d2r);
  alert("calc cLng " + cLng);




  // Calculate the points
  // Work around 360 points on circle
  for (var i=0; i < 360; i++) {

   var theta = Math.PI * (i/16);

   // Calculate next X point 
   circleY = longitude + (cLng * Math.cos(theta));            
    // Calculate next Y point 
   circleX = latitude + (cLat * Math.sin(theta));
    // Add point to array 
    points.push(new google.maps.LatLng(circleX, circleY));


 };


    alert("completed loop");

    var colors=["#CD0000","#2E6444","#003F87" ];

    var Polyline_Path = new google.maps.Polyline({
    path: points,
    strokeColor: colors[count],
    // color of the outline of the polyline
    strokeOpacity: 1,
    // between 0.0 and 1.0
   strokeWeight: 1,
   // The stroke width in pixels
   fillColor: colors[count],
    fillOpacity: .5
   });
    Polyline_Path.setMap(map);


 }

function clearMap(){
if(points){
for( i in points){
points[i].setMap(null);
}
points.length=0;

   }}


</script>
</head>
    <body onload="initialize()"> 
       <div id="map_canvas" style="width:500px; height:460px;
       -moz-outline-radius:20px; -moz-box-sizing:padding-box; -moz-outline-    style:solid ;-moz-outline-color:#9FB6CD; 
    -   moz-outline-width:10px;"></div>  
        <div>     
        Zip Code: <input id="address" type="textbox" value="">    
        Radius:<input id="radius" type="textbox" value="">
        <input type="button" value="Find" onclick="codeAddress() ">   
        <input type="button" value="Draw Radius" onclick= "drawCircle() ; plusCount()">
        <input type="button" value="Reset" onclick= "clearMap()">
    </div> 
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you create your circles using google.maps.Circle. Then you can create them and add tehm to an array like this

    var options = {
    strokeColor: #CD0000,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: #2E6444,
    fillOpacity: 0.5,
    map: map,
   center: latlng,
   radius: parseInt(radius)
};

circles[circles.length] = new google.maps.Circle(options);

    Then your clear map function will be

    function clearMap(){
   if (circles){
       for (var idx=0;idx<circles.length;idx++){
          circles[idx].setMap(null);
       }
   }
}
    • 0