CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
Rajnikanth
Rajnikanth

Reputation: 2785

How to remove circle radius from google map

I am trying to change radius circle in google-map with drop-down list for example when i select 2 km from drop-down list it will be set to 2.0 radius and again if i select 4 km it will be set 4.0 to radius. At this point everything is working perfect but now problem is after selecting second time the first one is exists an not removed from circle.

My Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type='text/css'>
#map_canvas {
    background:#ccc;
    height:400px;
    width:50%;
    margin-top:15px;
}
</style>

<select name="distance" id="distance">
  <option value="0.5" selected="selected">0.5 km</option>
  <option value="1.0">1 km</option>
  <option value="2.0">2 km</option>
  <option value="3.0">3 km</option>
  <option value="4.0">4 km</option>
  <option value="5.0">5 km</option>
</select>

<script type='text/javascript'>//<![CDATA[ 
jQuery.noConflict();
jQuery(document).ready(function() {
var subjectRange;
var myOptions = {
  zoom: 13,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var locations = ['1.280095,103.850949'];

/**
 * Draw points and check whether those points are inside a range from a point.
*/
var subjectPoint = {
    point: new google.maps.LatLng(1.280095,103.850949),
    radius: 1.0, //default radius
    color: '#00AA00',
}
var elevator;   

var map;
var geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(1.280095,103.850949);

//render the range
var subjectMarker = new google.maps.Marker({
    position: subjectPoint.point,
    title: 'Subject',
});
var subjectRange = new google.maps.Circle({
    map: map,
    radius: subjectPoint.radius * 1000,    // metres
    fillColor: subjectPoint.color,
                strokeColor: '#3D9912'
});
subjectRange.bindTo('center', subjectMarker, 'position');



function codeAddress(locations) {

    for (i = 0; i < locations.length; i++) {
        geocoder.geocode( { 'address': locations[i]}, 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);
            }
        });
    }
}
codeAddress(locations);


jQuery('#distance').on('change', function() {
    alert(jQuery('select[name="distance"] option:selected').val()); 

                rad = jQuery('select[name="distance"] option:selected').val();
                //subjectRange.setMap(null);
                var subjectPoint = {
                    point: new google.maps.LatLng(1.280095,103.850949),
                    radius: rad,
                    color: '#00AA00',
                }       
                //render the range
                var subjectMarker = new google.maps.Marker({
                    position: subjectPoint.point,
                    title: 'Subject',
                });
                var subjectRange = new google.maps.Circle({
                    map: map,
                    radius: subjectPoint.radius * 1000,    // metres
                    fillColor: subjectPoint.color,
                    strokeColor: '#3D9912'
                });
                subjectRange.bindTo('center', subjectMarker, 'position');

   });
});//]]>  

</script>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map_canvas">Google Map</div>
</body>
</html>

Upvotes: 1

Views: 2002

Answers (1)

geocodezip
geocodezip

Reputation: 161334

You are making a new circle every time you change the radius. Just change the radius of the existing circle:

jQuery('#distance').on('change', function() {

            rad = jQuery('select[name="distance"] option:selected').val();
            //render the range
            subjectRange.setOptions({radius:rad * 1000});
});

working example

Upvotes: 5

Related Questions