ユーザー設定半径でGoogleマップを取得しようとしています

Question

私はユーザーが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> 

Answer 1

円の半径が変更された後は、マップを更新していません。私は以下のコードをテストしていません。

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

map.fitBoundsのドキュメントはhereです。

また、すべての関数からアクセスできるスコープ内に1つのマップオブジェクトを置き、異なるオプションの新しいマップオブジェクトを作成する代わりに、中央とズームのオプションを設定するだけです。また、現在のコードでは、サークルを追加する最初のスクリプトコードにマップオブジェクトがどのようにアクセスできるかはわかりません。

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