title: Issue with Google Map Circle Radius Not Working
body: <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>