En éste tutorial vamos a usar la API de Google para autocompletar direcciones, la cual provee direcciones de sugerencia basado en el término de búsqueda del usuario y su ubicación.
Crear archivo index.html y añadir código HTML :
Vamos a crear un directorio llamado lugares dentro de la carpeta root de nuestro servidor, luego crearemos dentro de dicho directorio 3 carpetas (css y js). A continuación, descargue los archivos: bootstrap y jQuery y añadir en sus respectivos directorios css y js. Ahora crearemos el archivo index.html e incluir esos archivos css y js en el archivo index.html.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <meta name="description" content="Google Address Autocomplete API, google search autocomplete api, google jquery autocomplete, google places autocomplete jquery, google maps autocomplete tutorial, google autofill api"> <meta name="keywords" content="Google Address Autocomplete API, google search autocomplete api, google jquery autocomplete, google places autocomplete jquery, google maps autocomplete tutorial, google autofill api"> <meta name="author" content="https://plus.google.com/+MuniAyothi/"> <title>Google Address Autocomplete API</title><link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,200' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="css/style.css"> </head> <body onload="initialize()">
<div class="container" style="margin-top: 5px;"> <h1 class="title text-center">Google Address Autocomplete API</h1> <div class="row"> <div class="col-md-8"> <form class="form-horizontal">
<h2 class="text-center underline">Demo</h2>
<div class="form-group"> <label for="autocomplete" class="col-sm-2 control-label">Dirección</label> <div class="col-sm-10"> <input class="form-control" id="autocomplete" placeholder="Ingrese su dirección" onFocus="geolocate()" type="text"></input> </div> </div>
<div class="form-group"> <label for="street_number" class="col-sm-2 control-label">Calle</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="locality" class="col-sm-2 control-label">Ciudad</label> <div class="col-sm-10"> <input class="form-control" id="locality"></input> </div> </div>
<div class="form-group"> <label for="administrative_area_level_1" class="col-sm-2 control-label">Estado</label> <div class="col-sm-10"> <input class="form-control" id="administrative_area_level_1"></input> </div> </div>
<div class="form-group"> <label for="country" class="col-sm-2 control-label">País</label> <div class="col-sm-10"> <input class="form-control" id="country"></input> </div> </div>
<div class="form-group"> <label for="postal_code" class="col-sm-2 control-label">Código postal</label> <div class="col-sm-10"> <input class="form-control" id="postal_code"></input> </div> </div>
</form> </div> <div class="col-md-4">
</div> </div> </div> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> <script src="js/jquery.min.js"></script> <script src="js/script.js"> </script> </body> </html>
Archivo Javascript/jQuery de Google que autocompleta la dirección
// Este ejemplo muestra un formulario de dirección, utilizando la función de autocompletar // de Google places API para ayudar a los usuarios rellenar la información.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() { // Cree el objeto de autocompletado, restringiendo la búsqueda autocomplete = new google.maps.places.Autocomplete( (document.getElementById('autocomplete')), { types: ['geocode'] }); // Cuando el usuario selecciona una dirección en el menú desplegable, // rellena los campos de dirección en el formulario. 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 ); }
function fillInAddress() { // Obtener los detalles de lugar el objeto de autocompletado. var place = autocomplete.getPlace(); console.log( JSON.stringify(place) ); for (var component in componentForm) { document.getElementById(component).value = ''; document.getElementById(component).disabled = false; }
// Recibe cada componente de la dirección de los lugares más detalles // y llena el campo correspondiente en el formulario. 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; } } }
//ubicación geográfica del usuario,
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()); }); } }
Con los fragmentos de códigos anteriores básicamente hemos contruido nuestro autompletado usando direcciones proveidas por Google.
Demostración en vivo Descargar Archivos
Comentarios