Los campos autocompletar te permiten seleccionar un valor entre una lista de sugerencias. Es muy útil sobre todo en los campos que se solicita una dirección concreta. Ayuda a que el usuario ingrese la dirección apropiada sin tener que escribirla entera. La funcionalidad del autocompletador se puede añadir de manera sencilla a una campo de texto cuyo fin sea el de recibir una dirección utilizando la API de Google Maps.
La API de Google Maps con la librerÃa Places nos proporciona un método sencillo para convertir un simple campo de texto a un campo de búsqueda mediante jQuery. Los campos de texto para direcciones con autocompletador pueden utilizarse para que los usuarios lo tengan más sencillo a la hora de ingresar una dirección. Es decir, cuando el usuario comience a escribir en dicho campo, se mostrará un listado de predicciones debajo del campo basándose en lo que escrito. En este tutorial, te enseñaremos cómo añadir un campo autocompletar para dirección utilizando la API de Google Maps y jQuery.
LibrerÃa jQuery
Utilizaremos jQuery para ejecutar el gestor de eventos, por lo tanto, debemos incluirla:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
API de Google Maps
Utilizaremos tanto Google Maps, como la librerÃa Places para buscar direcciones y mostrar las predicciones en la caja de texto. Para ello debemos cargar la API de Google Maps (y a su vez la librerÃa places) y definir la API Key dentro de la llamada:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=Tu_API_Key"></script>
Encontrar direcciones con la API de Google Maps
Código Javascript
El siguiente código Javascript habilita el autocompletador de direcciones. Para ello se utiliza el método Autocomplete() de la librerÃa Places de Google Maps.
- Basado en el término de búsqueda, obtendremos las direcciones coincidentes de la librerÃa Places y se añadirán a la caja de sugerencias
- Se obtendrán la latitud y la longitud de la dirección seleccionada utilizando el método getPlace()
- Establecemos la latitud y la longitud en un campo hidden para obtenerlas por POST en el formulario
var searchInput = 'search_input'; $(document).ready(function () { var autocomplete; autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), { types: ['geocode'], }); google.maps.event.addListener(autocomplete, 'place_changed', function () { var near_place = autocomplete.getPlace(); document.getElementById('loc_lat').value = near_place.geometry.location.lat(); document.getElementById('loc_long').value = near_place.geometry.location.lng(); document.getElementById('latitude_view').innerHTML = near_place.geometry.location.lat(); document.getElementById('longitude_view').innerHTML = near_place.geometry.location.lng(); }); });
Eliminamos la latitud y la longitud cambiando el valor del campo hidden mediante jQuery
$(document).on('change', '#'+searchInput, function () { document.getElementById('latitude_input').value = ''; document.getElementById('longitude_input').value = ''; document.getElementById('latitude_view').innerHTML = ''; document.getElementById('longitude_view').innerHTML = ''; });
Código HTML
Creamos un elemento input, el cual nos servirá como autocompletador. Para ello ponle un ID distintivo. En el caso de este tutorial le pondremos como ID searchInput.
<!-- Autocomplete location search input --> <div class="form-group"> <label>Location:</label> <input type="text" class="form-control" id="search_input" placeholder="Type address..." /> <input type="hidden" id="loc_lat" /> <input type="hidden" id="loc_long" /> </div> <!-- Display latitude and longitude --> <div class="latlong-view"> <p><b>Latitude:</b> <span id="latitude_view"></span></p> <p><b>Longitude:</b> <span id="longitude_view"></span></p> </div>
Restricción por paÃsÂ
Puedes añadir una restricción por paÃs mediante las opciones del método Autocomplete() tal que asÃ:
var autocomplete; autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), { types: ['geocode'], componentRestrictions: { country: "USA" } });