Cerchio interattivo in google map che cambia nel cambiamento del raggio

Question

Voglio un cerchio interattivo per google maps, che aumenta o diminuisce man mano che cambi raggio in slider.
Si sta lavorando bene quando sto aumentando il raggio, ma il raggio decrescente non sta cambiando (decrescente) cerchio mappa

$(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'); 
         } 

Answer 1

creare il cerchio una volta invece che su ogni evento di scorrimento mossa. Quindi aggiorna semplicemente il raggio del cerchio quando il cursore cambia.

codice non testato:

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); 
}