I’m using this :

<script src="https://maps.googleapis.com/maps/api/js?key=Key&callback=init&libraries=places" defer></script>

for the places autocomplete address js api

I want to get for the “to” input field autocomplete addresses by using the lat,lng of the “from” input address as I show it in the inputs and the radius of the given please help me to get only those suggestions while I’m writing in the “to” field in the related of the lat,lng and the radius

<script src="https://maps.googleapis.com/maps/api/js?key=Key&callback=init&libraries=places" defer></script>
    <script>
        let fromInput;
        let toInput;
        let token;
        let s_latitude;
        let s_longitude;

        let fromRequest = {
            input: "",
        };

        let toRequest = {
            input: "",
            origin: {
                lat: 51.439438699999997,
                lng: -0.196970800000000
            },
            radius: 5000
        };



        async function init() {
            token = new google.maps.places.AutocompleteSessionToken();
            fromInput = document.getElementById("from");
            toInput = document.getElementById("to");

            fromInput.addEventListener("input", () => makeAcRequest(fromInput, fromRequest, document.getElementById("fromTitle"), document.getElementById("selectedFrom")));
            toInput.addEventListener("input", () => makeAcRequest(toInput, toRequest, document.getElementById("toTitle"), document.getElementById("selectedTo")));

            fromRequest = refreshToken(fromRequest);
            toRequest = refreshToken(toRequest);
        }

        async function makeAcRequest(input, request, titleElement, resultsElement) {
            if (input.value == "") {
                titleElement.innerText = "";
                resultsElement.replaceChildren();
                return;
            }

            request.input = input.value;

            try {
                const {
                    suggestions
                } = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

                titleElement.innerText = `Query predictions for "${request.input}"`;
                resultsElement.replaceChildren();

                for (const suggestion of suggestions) {
                    const placePrediction = suggestion.placePrediction;
                    const a = document.createElement("a");
                    a.addEventListener("click", () => onPlaceSelected(placePrediction.toPlace(), input, resultsElement, titleElement));
                    a.innerText = placePrediction.text.toString();

                    const li = document.createElement("li");
                    li.appendChild(a);
                    resultsElement.appendChild(li);
                }
            } catch (error) {
                console.error('Error fetching autocomplete suggestions:', error);
            }
        }

        async function onPlaceSelected(place, input, resultsElement, titleElement) {
            try {
                await place.fetchFields({
                    fields: ["location", "formattedAddress"],
                });

                console.log(place);
                input.value = place.formattedAddress || '';
                document.getElementById('s_latitude').value = place.location.lat().toFixed(15);
                document.getElementById('s_longitude').value = place.location.lng().toFixed(15);
                resultsElement.replaceChildren();
                titleElement.innerText = "Selected Place:";

                if (input === fromInput) {
                    fromRequest = refreshToken(fromRequest);
                } else if (input === toInput) {
                    toRequest = refreshToken(toRequest);
                }
            } catch (error) {
                console.error('Error fetching place details:', error);
            }
        }

        async function refreshToken(request) {
            token = new google.maps.places.AutocompleteSessionToken();
            request.sessionToken = token;
            return request;
        }

        window.init = init;
    </script>

This is how I’m doing in HTML getting lat,lng :

  <div class="searchDiv">
        <form id="addressForm" action="getAddress.php" method="post">
            <div class="fromDiv">
                <input id="from" name="fromAddress" type="text" placeholder="Search from address" />
                <input type="text" name="s_latitude" id="s_latitude" value="" />
                <input type="text" name="s_longitude" id="s_longitude" value="" />
                <div id="fromTitle"></div>
                <ul id="selectedFrom"></ul>
            </div>
            <div class="toDiv">
                <input id="to" name="toAddress" type="text" placeholder="Search to address" />
                <div id="toTitle"></div>
                <ul id="selectedTo"></ul>
            </div>
            <button class="submit" type="submit">Submit</button>
        </form>
    </div>