Quiero sesgar los resultados de la API de autocompletado de Places a un radio alrededor de la ubicación de los usuarios.
Veo en la Documentación de la API de Places que se supone que debo usar components , pero no estoy seguro de la sintaxis y no puedo encontrar un ejemplo. Ya tengo la ubicación actual de los usuarios en otra parte del proyecto, por lo que puede ignorarse por el bien de esta publicación.
<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>Estás viendo la documentación incorrecta. El que vinculó en su pregunta es para el servicio web, no para el widget que forma parte de la API de Javascript.
La documentación correcta está aquí .
No puede sesgar los resultados con una ubicación/radio, pero puede usar los bounds .
los
boundsson un objetogoogle.maps.LatLngBoundsque especifica el área en la que buscar lugares. Los resultados están sesgados hacia, pero no restringidos a, lugares contenidos dentro de estos límites.
También puede restringir la búsqueda a estos límites utilizando
strictBoundses un booleano que especifica si la API debe devolver solo aquellos lugares que están estrictamente dentro de la región definida por los límites dados. La API no devuelve resultados fuera de esta región, incluso si coinciden con la entrada del usuario.
Ejemplo:
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);