Issue with Google Map Circle Radius Not Working
<p>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. <strong>It won't update the radius for me.</strong>  Any help is much appreciated</p>

<pre><code>&lt;div data-role="collapsible"&gt;
    &lt;h4&gt;Location&lt;/h4&gt;
    &lt;center&gt;&lt;p&gt;
    &lt;table&gt;
      &lt;tr&gt;  
      &lt;td colspan="2"&gt;

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

    Search Radius:
    &lt;input type="range" name="search_radius" id="search_radius" min="10" max="100"&gt;
    &lt;script&gt;
        // 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);

    &lt;/script


&lt;/center&gt;
</code></pre>

<p>The next piece is the functionality for zooming and slider</p>

<pre><code>    &lt;!--Check Geolocation Support --&gt;
&lt;script&gt;
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 + 
    "&lt;br&gt;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());
  }

&lt;/script&gt;
&lt;script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer&gt;&lt;/script&gt;
</code></pre>