更改Google Maps API半径

Question

I'm trying to change an existing circle radius on google maps API. I'm using jquery-location-picker but here is a light snippet of what I'm trying to do:

$('#map').locationpicker({
            location: {
                latitude: initLat,
                longitude: initLon
            },
            radius: initRadius,
            zoom: initZoom,
            inputBinding: {
                latitudeInput: $('#map-lat'),
                longitudeInput: $('#map-lon'),
                locationNameInput: $('#map-address'),
                radiusInput: $('#map-radius')
            },
            onchanged: function (currentLocation, radius, isMarkerDropped) {
                var mapContext = $('#map').locationpicker('map');
                mapContext.marker.setVisible(true);
                mapContext.map.setZoom(13);

                //CHANGE RADIUS HERE
                mapContext.circle.setRadius(###);

            },
            enableAutocomplete: true,
            addressFormat: 'street_address',
            autocompleteOptions: {
                componentRestrictions: { country: 'us' }
            }
        });

Everything else in the onchanged event works correctly and I've tried various things found here without success.

Answer 1

Looking at the source code , there doesn't seem to be an externally available way to directly access the circle (at the current time). Changing the value of the input linked to it changes the radius. The code is open source, so you can modify it to allow direct access to the google.maps.Circle object.

Answer 2

Found a temporary solution, not sure if it's proper but it works. This simply forces a change event as if the user manually entered a new radius, but only if the marker was dropped or a new address was entered.

Location:
<input type="text" id="map-address" style="width: 200px" />
Radius:
<input type="text" id="map-radius" />mi
<input type="hidden" id="map-lat" />
<input type="hidden" id="map-lon" />
<div id="map" style="width: 500px; height: 400px;" />
<script>
    var iteration = 0;
    var initLat = 37.963922;
    var initLon = -95.966002;
    var initZoom = 3;
    var initRadius = 0;

    $('#map').locationpicker({
        location: {
            latitude: initLat,
            longitude: initLon
        },
        radius: initRadius,
        zoom: initZoom,
        inputBinding: {
            latitudeInput: $('#map-lat'),
            longitudeInput: $('#map-lon'),
            locationNameInput: $('#map-address'),
            radiusInput: $('#map-radius')
        },
        onchanged: function (currentLocation, radius, isMarkerDropped) {
            var mapContext = $('#map').locationpicker('map');
            mapContext.marker.setVisible(true);
            mapContext.map.setZoom(13);

            $("#map-address").change(function(){
                iteration = 0;
            });

            if (iteration < 1 && radius > 1) {
                radius = 1;
                var map_rad = document.getElementById("map-radius");
                map_rad.value = radius;
                map_rad.dispatchEvent(new Event('change'));
                iteration++;
            }
        },
        enableAutocomplete: true,
        addressFormat: 'street_address',
        autocompleteOptions: {
            componentRestrictions: { country: 'us' }
        }
    });
</script>

Special thanks to Miscreant's modern solution.