I want an interactive circle for google maps, which increases or decreases as and when i change radius in slider.
It is working fine when i am increasing radius, but on decreasing radius it is not changing(decreasing) circle in map

$(function() {
        $("#slide").slider({
               orientation: "horizontal",
               range: "min",
               max: 10000,
               min: 500,
               value: 500,
               slide: function( event, ui ) {
                            drawCircle(ui.value);
                                            }
                            });
             });

function drawCircle(rad){
      circle = new google.maps.Circle({
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35,
              map: myMap,
              radius: rad });

      circle.bindTo('center', marker, 'position');
                        }

I want an interactive circle for google maps, which increases or decreases as and when i change radius in slider.
It is working fine when i am increasing radius, but on decreasing radius it is not changing(decreasing) circle in map

$(function() {
        $("#slide").slider({
               orientation: "horizontal",
               range: "min",
               max: 10000,
               min: 500,
               value: 500,
               slide: function( event, ui ) {
                            drawCircle(ui.value);
                                            }
                            });
             });

function drawCircle(rad){
      circle = new google.maps.Circle({
              strokeColor: "#FF0000",
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: "#FF0000",
              fillOpacity: 0.35,
              map: myMap,
              radius: rad });

      circle.bindTo('center', marker, 'position');
                        }

• javascript
• jquery
• google-maps
• google-maps-api-3

• 1 You should create the Circle on page load (or other event) and then simply update the radius and redraw the Circle whenever it changes. – js1568 Commented Feb 26, 2013 at 17:19

1 Answer 1

Create the circle once instead of on every slider move event. Then simply update the radius of the circle when the slider changes.

Untested code:

var circle; //global variable, consider adding it to map instead of window

$(function() {
  circle = new google.maps.Circle({
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: myMap,
    radius: 500
  });
  circle.bindTo('center', marker, 'position');

  $( "#slide" ).slider({
    orientation: "horizontal",
    range: "min",
    max: 10000,
    min: 500,
    value: 500,
    slide: function( event, ui ) {
     updateRadius(circle, ui.value);
    }
  });
});

function updateRadius(circle, rad){
  circle.setRadius(rad);
}