Maps v3 API Searchbox - change radius for circle with rangeslider

Question

Im trying to make a map with maps api where users can insert there adress and set the notification radius for there location.
I used the places-searchbox example from Google developers page and modified a bit.

I don't know how i can get the active and changing rangeslider value for the circle radius.

I made an example on Plunker: https://plnkr.co/edit/91FAbWgULMXmUSvcSkwt?p=preview

JS:

            var inputradius = document.getElementById('myRange').value;
         $("#rangeValue").text($("#myRange").val())

      $("#myRange").on("input change", function() {
          $("#rangeValue").text($("#myRange").val())

          var inputradius = document.getElementById('myRange').value;


     });




 function initAutocomplete() {
        var CenterToCountry = {lat: 50.9725, lng: 11.4804};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: CenterToCountry,
          zoom: 6,
          mapTypeId: 'roadmap',
              streetViewControl: false,
              mapTypeControl: false
        });

        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }


           markers.push(new google.maps.Marker({
              map: map,
              title: place.name,
              position: place.geometry.location
            }));

            var location = place.geometry.location;
            var lat = location.lat();
            var lng = location.lng();

            document.getElementById("lat").value = lat;
            document.getElementById("lng").value = lng;





            var notifyrange = new google.maps.Circle({
            strokeColor: '#ff9600',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FFAB00 ',
            fillOpacity: 0.35,
            map: map,
            center: place.geometry.location,
            radius: inputradius
          });


          console.log(inputradius)



            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);



        });

      }

Edit: updated code, now im able to get the value live, but i don't know how to set up in maps api. Getting error like "inputradius" isn't a number etc.


Edit2:
Currently im tying inside the $("#myRange").on("input change", function() to change the circle radius with:

    var inputradius = document.getElementById('myRange').value;

     $("#rangeValue").text($("#myRange").val())

  $("#myRange").on("input change", function() {
      $("#rangeValue").text($("#myRange").val())

      var inputradius = document.getElementById('myRange').value;

      function updateRadius(circle, inputradius) {
    circle.setRadius(inputradius * 1000);
    map.fitBounds(circle.getBounds());
    }

 });

But won't work...

Answer 1

check this working output: http://jsbin.com/gisoyay/1/edit?js,output

Slider functionality for setting the radius is now working.

Here is the updated JS:

var inputradius = document.getElementById('myRange');
var notifyrange;

$("#rangeValue").text($("#myRange").val())

$("#myRange").on("input change", function() {
    $("#rangeValue").text($("#myRange").val());

    if(notifyrange)
      updateRadius(notifyrange, parseFloat(inputradius.value));
});

function updateRadius(circle, radius) {
    var map = circle.getMap();   
    circle.setRadius(radius * 1000);
    map.fitBounds(circle.getBounds());
}

function initAutocomplete() {

    var CenterToCountry = {lat: 50.9725, lng: 11.4804};

    var map = new google.maps.Map(document.getElementById('map'), {
        center: CenterToCountry,
        zoom: 6,
        mapTypeId: 'roadmap',
        streetViewControl: false,
        mapTypeControl: false
    });

    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    map.addListener('bounds_changed', function() {
       searchBox.setBounds(map.getBounds());
    });

    var markers = [];

    searchBox.addListener('places_changed', function() {
       var places = searchBox.getPlaces();

       if (places.length === 0) {
         return;
       }

      markers.forEach(function(marker) {
        marker.setMap(null);
      });

    markers = [];

    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {
         if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
         }

         markers.push(new google.maps.Marker({
             map: map,
             title: place.name,
             position: place.geometry.location
         }));

         var location = place.geometry.location;
         var lat = location.lat();
         var lng = location.lng();

         document.getElementById("lat").value = lat;
         document.getElementById("lng").value = lng;

         notifyrange = new google.maps.Circle({
              strokeColor: '#ff9600',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#FFAB00 ',
              fillOpacity: 0.35,
              map: map,
              center: place.geometry.location,
              radius: parseFloat(inputradius.value) * 1000
         });

         if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
         } else {
              bounds.extend(place.geometry.location);
         }
     });
     map.fitBounds(bounds);
  });
}