Change google maps API radius

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.

What is "###"? Is it a string or a number? Any interesting output in the javascript console? — geocodezip, Jan 17 '17 at 23:41
"###" is a number in meters. The console reads: "Uncaught TypeError: Cannot read property 'setRadius' of undefined" — MuffinMan, Jan 18 '17 at 22:31
As I noted in my answer, there is no `circle` property of `mapContext` — geocodezip, Jan 18 '17 at 23:33

score 0 · Answer 1 · answered Jan 18 '17 at 10:31

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.

score 0 · Accepted Answer · edited May 23 '17 at 11:45

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.

Change google maps API radius

2 Answers2