How to restrict Google Places Autocomplete to radius

Question

I want to bias the Places autocomplete API results to a radius around the users location.

I see in the Places API Documentation that I'm supposed to use components , but I'm not sure of the syntax and I can't find an example. I already have the users current location in another part of the project, so that can be ignored for the sake of this post.

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]&libraries=places&callback=initAutocomplete" async defer></script>

<script>
    function initAutocomplete() {        
        var input = document.getElementById('directions-from');
        new google.maps.places.Autocomplete(input);
    }
</script>

<div class="row">
    <div class="col-6">
        <label for="directions-from">From:</label>
        <input id="directions-from" placeholder="Enter a place" class="form-control" type="text" />
        <br />
        <label for="directions-to">To:</label>
        <input type="text" id="directions-to" class="form-control" value="@formatToAddressInput" disabled />
        <br />
        <input type="button" value="Go" onclick="setMapAddress()" />
        <input type="button" value="Clear" onclick="clearInput()" />
    </div>
</div>

<div class="row">
    <div class="col-12">
        <iframe 
            height="350" 
            id="google-maps" 
            width="600" 
            frameborder="0" 
            style="border:0" 
            referrerpolicy="no-referrer-when-downgrade"                 
            src="https://www.google.com/maps/embed/v1/directions?key=[KEY]&origin=@formatToAddressAPI&destination=@formatToAddressAPI">
        </iframe>
    </div>
</div>

<script>
    function clearInput() {
        $('#directions-from').val("");
    }

    function setMapAddress() {
        if ($('#directions-from').val().length > 1) {
            var address = $('#directions-from').val();
            address = address.replace(' ', '+');

            var mapsURL = $('#google-maps').attr('src');
            var url = new URL(mapsURL);
            url.searchParams.set("origin", address);

            //reload iFrame
            console.log(url);
            document.getElementById('google-maps').src = url;
        }
    }
</script>

Answer 1

You are looking at the wrong documentation. The one you linked in your question is for the web-service, not the widget which is part of the Javascript API.

The correct documentation is here .

You cannot bias the results with a location/radius but you can use bounds .

bounds is a google.maps.LatLngBounds object specifying the area in which to search for places. The results are biased towards, but not restricted to, places contained within these bounds.

You can also restrict the search to these bounds by using

strictBounds is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input.

Example:

const center = new google.maps.LatLng(52.518588, 13.369337);

// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};

const input = document.getElementById('directions-from');
const options = {
  bounds: defaultBounds,
  fields: ["address_components"], // Or whatever fields you need
  strictBounds: true, // Only if you want to restrict, not bias
  types: ["establishment"], // Whatever types you need
};

const autocomplete = new google.maps.places.Autocomplete(input, options);