Maps v3 API Searchbox - rangesliderを使ってサークルの半径を変更する

Question

マップapiを使用して地図を作成しようとすると、そこにユーザーが住所を挿入して通知半径を設定できます。
Googleの開発者ページのplaces-searchboxの例を使用して少し修正しました。

サークル半径の有効範囲と変更範囲の値を取得する方法がわかりません。 https://plnkr.co/edit/91FAbWgULMXmUSvcSkwt?p=preview

JS：

  var inputradius = document.getElementById('myRange').value; 
     $("#rangeValue").text($("#myRange").val()) 

     $("#myRange").on("input change", function() { 
      $("#rangeValue").text($("#myRange").val()) 

      var inputradius = document.getElementById('myRange').value; 


    }); 




function initAutocomplete() { 
     var CenterToCountry = {lat: 50.9725, lng: 11.4804}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: CenterToCountry, 
      zoom: 6, 
      mapTypeId: 'roadmap', 
       streetViewControl: false, 
       mapTypeControl: false 
     }); 

     var input = document.getElementById('pac-input'); 
     var searchBox = new google.maps.places.SearchBox(input); 
     map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

     map.addListener('bounds_changed', function() { 
      searchBox.setBounds(map.getBounds()); 
     }); 

     var markers = []; 
     searchBox.addListener('places_changed', function() { 
      var places = searchBox.getPlaces(); 

      if (places.length == 0) { 
      return; 
      } 

      markers.forEach(function(marker) { 
      marker.setMap(null); 
      }); 
      markers = []; 

      var bounds = new google.maps.LatLngBounds(); 
      places.forEach(function(place) { 
      if (!place.geometry) { 
       console.log("Returned place contains no geometry"); 
       return; 
      } 


      markers.push(new google.maps.Marker({ 
       map: map, 
       title: place.name, 
       position: place.geometry.location 
      })); 

      var location = place.geometry.location; 
      var lat = location.lat(); 
      var lng = location.lng(); 

      document.getElementById("lat").value = lat; 
      document.getElementById("lng").value = lng; 





      var notifyrange = new google.maps.Circle({ 
      strokeColor: '#ff9600', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FFAB00 ', 
      fillOpacity: 0.35, 
      map: map, 
      center: place.geometry.location, 
      radius: inputradius 
      }); 


      console.log(inputradius) 



      if (place.geometry.viewport) { 
       bounds.union(place.geometry.viewport); 
      } else { 
       bounds.extend(place.geometry.location); 
      } 
      }); 
      map.fitBounds(bounds); 



     }); 

     } 

編集：

は私がPlunker上の例で作られた更新されたコード、今、生きて値を取得することができイムを私は知りませんかマップapiで設定する「inputradius」のようなエラーがなど数ではありません


を取得EDIT2：
現在の円の半径を変更する$("#myRange").on("input change", function()内抱き合わせイム：

var inputradius = document.getElementById('myRange').value; 

    $("#rangeValue").text($("#myRange").val()) 

    $("#myRange").on("input change", function() { 
     $("#rangeValue").text($("#myRange").val()) 

     var inputradius = document.getElementById('myRange').value; 

     function updateRadius(circle, inputradius) { 
    circle.setRadius(inputradius * 1000); 
    map.fitBounds(circle.getBounds()); 
    } 

}); 

しかし、動作しません。 ...

Answer 1

チェックこの作業出力：半径を設定するためのhttp://jsbin.com/gisoyay/1/edit?js,output

スライダー機能今働いている。

はここで更新JSです：

var inputradius = document.getElementById('myRange'); 
var notifyrange; 

$("#rangeValue").text($("#myRange").val()) 

$("#myRange").on("input change", function() { 
    $("#rangeValue").text($("#myRange").val()); 

    if(notifyrange) 
     updateRadius(notifyrange, parseFloat(inputradius.value)); 
}); 

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

function initAutocomplete() { 

    var CenterToCountry = {lat: 50.9725, lng: 11.4804}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     center: CenterToCountry, 
     zoom: 6, 
     mapTypeId: 'roadmap', 
     streetViewControl: false, 
     mapTypeControl: false 
    }); 

    var input = document.getElementById('pac-input'); 
    var searchBox = new google.maps.places.SearchBox(input); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 

    map.addListener('bounds_changed', function() { 
     searchBox.setBounds(map.getBounds()); 
    }); 

    var markers = []; 

    searchBox.addListener('places_changed', function() { 
     var places = searchBox.getPlaces(); 

     if (places.length === 0) { 
     return; 
     } 

     markers.forEach(function(marker) { 
     marker.setMap(null); 
     }); 

    markers = []; 

    var bounds = new google.maps.LatLngBounds(); 

    places.forEach(function(place) { 
     if (!place.geometry) { 
      console.log("Returned place contains no geometry"); 
      return; 
     } 

     markers.push(new google.maps.Marker({ 
      map: map, 
      title: place.name, 
      position: place.geometry.location 
     })); 

     var location = place.geometry.location; 
     var lat = location.lat(); 
     var lng = location.lng(); 

     document.getElementById("lat").value = lat; 
     document.getElementById("lng").value = lng; 

     notifyrange = new google.maps.Circle({ 
       strokeColor: '#ff9600', 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: '#FFAB00 ', 
       fillOpacity: 0.35, 
       map: map, 
       center: place.geometry.location, 
       radius: parseFloat(inputradius.value) * 1000 
     }); 

     if (place.geometry.viewport) { 
       bounds.union(place.geometry.viewport); 
     } else { 
       bounds.extend(place.geometry.location); 
     } 
    }); 
    map.fitBounds(bounds); 
    }); 
}