Maps v3 API Suchfeld - Radius für Kreis mit Ransglider ändern

Question

Ich versuche, eine Karte mit Karten api zu erstellen, wo Benutzer ihre Adresse einfügen und den Benachrichtigungsradius für den Standort festlegen können.
Ich habe die Orte-searchbox Beispiel von Google-Entwickler-Seite und ein bisschen geändert.

Ich weiß nicht, wie ich den aktiven und ändernden rangerslider Wert für den Kreisradius erhalten kann.

ich ein Beispiel auf Plunker gemacht: 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); 



     }); 

     } 

Edit: aktualisierten Code, jetzt in der Lage im den Wert lebt zu bekommen, aber ich weiß nicht, wie in Karten api aufstellen. Erste Fehler wie "inputradius" ist keine Zahl usw.


Edit2:
Zur Zeit binden im, in der $("#myRange").on("input change", function() den Kreisradius zu ändern, mit:

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

}); 

Aber wird nicht funktionieren ...

Answer 1

Überprüfung dieser Arbeitsleistung: http://jsbin.com/gisoyay/1/edit?js,output

Slider-Funktionalität zum Einstellen des Radius arbeitet jetzt.

Hier ist die aktualisierten 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); 
    }); 
}