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>