Maps v3 API Searchbox - 범위가있는 서클의 반지름 변경

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에서 설정하는 방법.
가 현재와 원 반경을 변경하려면 $("#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()); 
    } 

}); 

을하지만 작동하지 않습니다 "inputradius"와 같은 오류가 발생하는 등


Edit2가 숫자가 아닌 것입니다 ...

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