Issue with Google Map Circle Radius Not Working

Question

I have the following code to allow the user to scale out and in a map with a slider. I have the code mostly here but I can't get it to work. Here is the code for displaying the map. It won't update the radius for me. Any help is much appreciated

<div data-role="collapsible">
    <h4>Location</h4>
    <center><p>
    <table>
      <tr>  
      <td colspan="2">

    </td></tr>
    </table>
    </p></center>
  </div>
<center>
    <script>getLocation();</script>
    <button onclick="getLocation()">Get My Location</button><p id="map"></p>

    Search Radius:
    <input type="range" name="search_radius" id="search_radius" min="10" max="100">
    <script>
        // Add a Circle overlay to the map.
        circle = new google.maps.Circle({
            map: map,
            radius: 10
        });

        // Since Circle and Marker both extend MVCObject, you can bind them
        // together using MVCObject's bindTo() method.  Here, we're binding
        // the Circle's center to the Marker's position.
        // http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
        circle.bindTo('center', marker, 'position');
        }


        $("#search_radius").slider({
            orientation: "vertical",
            range: "min",
            max: 3000,
             min: 100,
            value: 500,
            slide: function(event, ui) {
                updateRadius(circle, ui.value);
            }
        });

        function updateRadius(circle, rad) {
            circle.setRadius(rad);
        }

        // Register an event listener to fire when the page finishes loading.
        google.maps.event.addDomListener(window, 'load', init);

    </script


</center>

The next piece is the functionality for zooming and slider

    <!--Check Geolocation Support -->
<script>
var x = document.getElementById("map");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: position.coords.latitude, lng: position.coords.longitude},
      zoom: 12
    });
}

function initMap() {
     var mapDiv = document.getElementById('map');
    var map = new google.maps.Map(mapDiv, {
      center: {lat: 53.3498, lng: -6.2603},
      zoom: 6
    });

  }

  function updateRadius(circle, rad) {
    circle.setRadius(rad);
    map.fitBounds(circle.getBounds());
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

Answer 1

It seems invalid container is used for jQuery Slider As soon as the element:

<input type="range" name="search_radius" id="search_radius" min="10" max="100">

is getting replaced with div container:

<div id="search_radius"></div>

slider widget start working as expected.

Example

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: { lat: -24.397, lng: 150.644 }
  });


  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
  });

  var radius = 500; //in kilometers

  // Add a Circle overlay to the map.
  var circle = new google.maps.Circle({
    map: map,
    radius: 1000 * radius
  });
  circle.bindTo('center', marker, 'position');

  initSlider(circle);

}

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



function initSlider(circle) {
  $("#search_radius").slider({
    orientation: "vertical",
    range: "min",
    max: 3000,
    min: 100,
    value: circle.getRadius() / 1000,
    step: 100,
    slide: function (event, ui) {
      updateRadius(circle, ui.value);
      //console.log(ui.value);
    }
  });
  var map = circle.getMap();
  map.controls[google.maps.ControlPosition.LEFT_CENTER].push($("#search_radius").get(0));

}

google.maps.event.addDomListener(window, 'load', initMap);

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


        #search_radius {
            left: 20px !important;
        }

        
        

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://maps.google.com/maps/api/js"></script>

<div id="search_radius"></div>
<div id="map"></div>

Plunker