Campo autocompletar utilizando la API Google Maps con la librería Places

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"
    }
});