Javascript 正在尝试使用用户设置的半径获取google地图

我尝试允许用户设置从谷歌地图的用户中心位置开始的半径。我有大部分的螺母和螺栓，但不能把它穿线。这是我正在使用的代码。非常感谢您的帮助

css和html代码

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>
    <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

<!--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
    });

  }

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

搜索半径：
//将圆覆盖添加到地图。
圆圈=新的google.maps.circle({
地图：地图，
半径：10
});
//因为圆和标记都扩展了MVCObject，所以可以绑定它们
//一起使用MVCObject的bindTo（）方法。这里，我们绑定了
//圆的中心到标记的位置。
// http://code.google.com/apis/maps/documentation/v3/reference.html#MVCObject
圆圈.bindTo（'中心'，标记，'位置'）；
}
$（“#搜索半径”）.滑块({
方向：“垂直”，
射程：“分钟”，
最高：3000，
最低:100,，
价值：500，
幻灯片：功能（事件、用户界面）{
updateRadius（圆圈，用户界面值）；
}
});
函数更新半径（圆，弧度）{
圆半径（rad）；
}
//注册一个事件侦听器，以便在页面完成加载时触发。
google.maps.event.addDomListener（窗口'load'，init）；
更改圆的半径后，您不会更新地图。我还没有测试下面的代码

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

map.fitbunds上的文档

您可能还应该在所有函数都可以访问的范围内拥有一个贴图对象，并在其上设置“中心”和“缩放”选项，而不是为不同的选项创建新的贴图对象。在当前代码中，我也看不到添加圆的第一个脚本代码是如何访问map对象的

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

function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;

    map.center = {lat: position.coords.latitude, lng:     position.coords.longitude};
    map.zoom = 12;
  });
}

var x=document.getElementById（“map”）；
var map=new google.maps.map（mapDiv{
中心：{lat:53.3498，lng:-6.2603}，
缩放：6
});
功能显示位置（位置）{
x、 innerHTML=“纬度：”+position.coords.Latitude+
“
经度：”+position.coords.Longitude；
map.center={lat:position.coords.latitude，lng:position.coords.longitude}；
map.zoom=12；
});
}
我确实使用了initMap，这应该是不必要的，因为用户必须单击“获取位置”。这不是正确的方法，但我想不出更好的解决方案。