Dynamically update radius marker in Google maps api using range slider

Question

I have a script where I apply a search radius within a google map. I can change the radius and have it display dynamically but cannot seem to figure out how to replace the radius instead of just adding a radius. The function uses bindTo marker. I have tried replace and replaceWith but they do not seem to work.

Here is the range input -

<input type="range" class="custom-range" id="customRange1" value="20">

Here is the add marker script and creating the radius and binding it when the range value changes.

var marker = new google.maps.Marker({
    map: map,
    position: latLng,         
    title: name,
    icon: 'linktoimage'
    });        


// Add circle overlay and bind to marker

$('#customRange1').change(function(){
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    var circle = new google.maps.Circle({
        map: map,
        radius:rad,   
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
    });
        circle.bindTo('center', marker, 'position');
});

So when I change the range value it will add a new radius overlay on top of the old, I would like it to replace the current radius overlay with the new. I am guessing its because I'm using bindTo.

Answer 1

Keep a reference to the circle, if the circle already exists, don't create a new one, change the existing one:

  var circle;
  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

proof of concept fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  var circle;
  var marker = new google.maps.Marker({
    map: map,
    position: map.getCenter(),
    title: "name"
  });


  // Add circle overlay and bind to marker
  $('#customRange1').change(function() {
    var new_rad = $(this).val();
    var rad = new_rad * 1609.34;
    if (!circle || !circle.setRadius) {
      circle = new google.maps.Circle({
        map: map,
        radius: rad,
        fillColor: '#555',
        strokeColor: '#ffffff',
        strokeOpacity: 0.1,
        strokeWeight: 3
      });
      circle.bindTo('center', marker, 'position');
    } else circle.setRadius(rad);
  });

}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" class="custom-range" id="customRange1" value="20">
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>