En este tutorial vamos cómo implementar un autocompletador de direcciones con la API de Google. Este autocompletador de Google nos proporcionará un campo que, en base a lo que el usuario escriba, nos sugerirá las direcciones más cercanas a lo introducido en el campo. Mediante este campo seremos capaces de obtener el nombre del lugar completo y su ubicación.
Ventajas de utilizar un autocompletador de direcciones
- No tienes necesidad de albergar en una base de datos todas las direcciones disponibles como, seguramente, hayas visto en otros scripts de autocompletar. Google nos proporcionará todas las direcciones.
- Utilizar la API de Google es extremadamente sencillo.
Crea el fichero index.html y añade este simple HTML
Créate un directorio llamado place en la carpeta htdocs del directorio raíz de tu servidor. Después crea la siguiente lista de carpetas (css, js) en el directorio place. Más tarde, descárgate bootstrap y los archivos de jQuery, y añádelos en sus respectivos directorios css y js. Ahora crea un archivo llamado index.html y no te olvides de incluir dentro de él la llamada a los distintos archivos css y js.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Address Autocomplete API</title>
<!-- Bootstrap -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
<!-- Script -->
<script src="js/jquery.min.js"></script>
<script src="js/script.js"> </script>
</head>
<body onload="initialize()">
</body>
</html>Diseño del autocompletador de direcciones de Google
Este es el código HTML del autocompletador de direcciones de Google.
<form class="form-horizontal">
<h2 class="text-center underline">Demo 1</h2>
<div class="form-group" style="margin-bottom: 150px;">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="autocomplete_textarea" ></textarea>
</div>
</div>
<hr/>
<h2 class="text-center underline">Demo 2</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label"> </label>
<div class="col-sm-10">
<input class="form-control" id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text"></input>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Street address</label>
<div class="col-sm-10">
<input class="form-control" id="street_number"></input>
<br/>
<input class="form-control" id="route"></input>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input class="form-control" id="locality"></input>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">State</label>
<div class="col-sm-10">
<input class="form-control" id="administrative_area_level_1"></input>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input class="form-control" id="country"></input>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Zip code</label>
<div class="col-sm-10">
<input class="form-control" id="postal_code"></input>
</div>
</div>
</form>Código Javascript/jQuery del autocompletador de direcciones de Google
Este es el código javascript del autocompletador de direcciones de Google.
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.
var placeSearch, autocomplete, autocomplete_textarea;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
autocomplete_textarea = new google.maps.places.Autocomplete((document.getElementById('autocomplete_textarea')),
{ types: ['geocode'] }
);
google.maps.event.addListener(autocomplete_textarea, 'place_changed', function() {
fillInAddress_textarea();
});
}
function fillInAddress_textarea(){
var place = autocomplete_textarea.getPlace();
console.log( place.formatted_address );
console.log( JSON.stringify(place) );
$('#autocomplete_textarea').val( place.formatted_address );
}
// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
console.log( JSON.stringify(place) );
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
autocomplete_textarea.setBounds(circle.getBounds());
});
}
}
// [END region_geolocation]
Fuente: smarttutorials.net