Autocompletar direcciones usando la API de Google

google_address_api

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>

<!DOCTYPE html>

<html>

<head>

<title>Google Address Autocomplete API</title>

</head>

<h1 class="title text-center">Google Address Autocomplete API</h1>

<label for="autocomplete" class="col-sm-2 control-label">Dirección</label>

</div>

<label for="street_number" class="col-sm-2 control-label">Calle</label>

<br/>

</div>

<label for="locality" class="col-sm-2 control-label">Ciudad</label>

</div>

<label for="administrative_area_level_1" class="col-sm-2 control-label">Estado</label>

</div>

</div>

<label for="postal_code" class="col-sm-2 control-label">Código postal</label>

</div>

</form>

</div>

</div>

</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());
    });
  }
}

// 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

Blog

Autocompletar direcciones usando la API de Google

Crear archivo index.html y añadir código HTML :

Archivo Javascript/jQuery de Google que autocompleta la dirección

También te puede interesar:

Cómo Importar una Base de Datos Grande en Windows con MySQL

Cómo trabajar con fechas y horas en PHP

Crea una calculadora de interés compuesto mensual con PHP

Suscríbete a nuestro boletín de noticias

Sobre Mi

Productos

Enlaces importantes