how to draw circle on change radius slowly on google maps javascript?

Question

I created a circle using google maps javascript api that change zoom on value change of a slider.I want to know if it's possible to draw the circle when change radius slowly.

 slider.on("slideStop", function () {
   circle.addListener('radius_changed', function () {
     var bounds = circle.getBounds();
     map.fitBounds(bounds);
 });    
 circle.setRadius(parseInt($("#ex6SliderVal").text() * 1000));                               });

Answer 1

An option that you can do to draw circle with animation is to change circle radius using setRadius() method and add some animation using setInterval() as shown in http://jsbin.com/nuwem/1/edit .

var direction = 1;
var rMin = 150, rMax = 300;
setInterval(function() {
var radius = circle.getRadius();
if ((radius > rMax) || (radius < rMin)) {
direction *= -1;
}
circle.setRadius(radius + direction * 10);
}, 50);

As noted in the Zoom Control Style documentation , zoom on value change of a slider are not available in the new set of controls introduced in v3.22 of the Google Maps JavaScript API. You may opt to use the earlier set of controls by setting the control style to 'azteca' while using the v3.22 or v3.23 of the Google Maps JavaScript API.

Answer 2

You are listening for the "slideStop" event, If you want to change immediately after any change to the slider value, you should listen for the "change" event.

Anyway, you are registering a listener inside the callback of an event, this will bind a new listener every time the user move the slider.

This will probably do the work (not tested):

slider.on( 'change' , function( oldValue, newValue ) {
    circle.setRadius( newValue * 1000 );
    var bounds = circle.getBounds( );
    map.fitBounds( bounds );
} );