geometry - google maps v3: clearing a circle made from polylines off the map -
i trying figure out how clear circles off map allows users draw radius around point. clearmap function doesn't seem 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 not successful 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 not successful following reason: " + status); } }); //degrees radians var d2r = math.pi / 180; alert("calc d2r " + d2r); // radians degrees var r2d = 180 / math.pi; alert("calc r2d " + r2d); // earth radius 3,963 miles var clat = (radius / 3963) * r2d; alert("calc clat " + clat); var clng = clat / math.cos(latitude * d2r); alert("calc clng " + clng); // calculate points // work around 360 points on circle (var i=0; < 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 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 outline of polyline strokeopacity: 1, // between 0.0 , 1.0 strokeweight: 1, // stroke width in pixels fillcolor: colors[count], fillopacity: .5 }); polyline_path.setmap(map); } function clearmap(){ if(points){ for( 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>
if create circles using google.maps.circle. can create them , add tehm array 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 clear map function be
function clearmap(){ if (circles){ (var idx=0;idx<circles.length;idx++){ circles[idx].setmap(null); } } }
Comments
Post a Comment