Ya aprendimos como obtener las coordenadas de ubicación con HTML5, hemos también comentado como realizar la misma funcionalidad para navegadores que no soportan HTML5 (fallback), pero siendo sinceros, esta información no nos resulta muy útil, ya que la mayoría de nosotros entiende de direcciones en lugar de coordenadas. Para ello nos ayudamos con un conjunto de bibliotecas de Google Maps.

La biblioteca está disponible en la dirección:

http://maps.google.com/maps/api/js?sensor=false

Esta biblioteca posee varias funcionalidades, pero para este artículo nos centraremos solamente en obtener direcciones a partir de coordenadas. Partiremos de el script previamente desarrollado (ver aquí), que obtiene las coordenadas de ubicación del usuario.

 

Implementando la Geolocalización con Google Maps

Para obtener las direcciones con la biblioteca de google maps, debemos realizar una serie de pasos:

  • Importar la biblioteca de Google Maps en nuestro script.
  • Crear el objeto google.maps.Geocoder.
  • Ejecutar el método geocode() para obtener la dirección.
  • Crear el método callback que aceptará los valores del método anterior para mostrar el resultado.

 

Importar la biblioteca de Google Maps

Simplemente añadiendo la url donde está ubicada la biblioteca

1
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

 

Crear el objeto google.maps.Geocoder

Es el objeto principal para realizar la petición de consulta a Google Maps

1
var geocoder = new google.maps.Geocoder();

 

Ejecutar el método geocode()

El método geocode(), nos realiza la solicitud de ubicación con Google Maps, éste método acepta 2 parámetros, el primero es el parámetro de búsqueda para google y el segundo es la función callback que procesará la respuesta. El primer parámetro definirá que  acción realizará el método geocode():

  • address: Es la dirección que deseas buscar para obtener las coordenadas geográficas.
  • latLng: Es la latitud y longitud que deseas buscar para obtener la dirección.
  • bounds: Son los límites de latitud y longitud por los que deseas delimitar la búsqueda.
  • language: Es el idioma en el que se devuelven los resultados.
  • region: Código de región.
1
2
var yourLocation = new google.maps.LatLng(lat, longi);
geocoder.geocode({ 'latLng': yourLocation },processGeocoder);

 

Crear el método Callback

Solo nos queda desarrollar el método que recibirá la información de respuesta asíncrona (callback). Al recibir la respuesta, se reciben en 2 parámetros de nuestro método callback y por lo cual debemos definirlos, results y status.

    • status: Es el código de respuesta de la petición, los valores posibles son:
      • OK: Sin Error, se ha devuelto una dirección correctamente.
      • ZERO_RESULTS: Sin Error, la codificación se ha realizado correctamente pero no se ha devuelto ningún resultado.
      • OVER_QUERY_LIMIT: Se ha alcanzado el límite de solicitudes.
      • REQUEST_DENIED:  Se ha denegado la solicitud, generalmente es por la ausencia del parámetro obligatorio sensor.
      • INVALID_REQUEST: Igual que el anterior, pero es por no especificar el parámetro address o latlng.

 

  • results: Si todo va OK, el resultado se devuelve en un array asociativo con este nombre. La estructura de este array es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
{
"results": [ {
"types": street_address,
"formatted_address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA",
"address_components": [ {
"long_name": "1600",
"short_name": "1600",
"types": street_number
}, {
"long_name": "Amphitheatre Pkwy",
"short_name": "Amphitheatre Pkwy",
"types": route
}, {
"long_name": "Mountain View",
"short_name": "Mountain View",
"types": [ "locality", "political" ]
}, {
"long_name": "California",
"short_name": "CA",
"types": [ "administrative_area_level_1", "political" ]
}, {
"long_name": "United States",
"short_name": "US",
"types": [ "country", "political" ]
}, {
"long_name": "94043",
"short_name": "94043",
"types": postal_code
} ],
"geometry": {
"location": {
"lat": 37.4219720,
"lng": -122.0841430
},
"location_type": "ROOFTOP",
"viewport": {
"southwest": {
"lat": 37.4188244,
"lng": -122.0872906
},
"northeast": {
"lat": 37.4251196,
"lng": -122.0809954
}
}
}
} ]
}

El metodo callback es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
function processGeocoder(results, status){

if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.forms[0].dir.value=results[0].formatted_address;
} else {
error('Google no retorno resultado alguno.');
}
} else {
error("Geocoding fallo debido a : " + status);
}
}

 

Uniendo Todo

Ahora unimos todo en un solo Script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<html>
<head>
<title>Local</title>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >

function getGeo(){

if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoOK, geoKO);
} else {
geoMaxmind();
}

}

function geoOK(position) {
showLatLong(position.coords.latitude, position.coords.longitude);
}
function geoMaxmind() {
showLatLong(geoip_latitude(), geoip_longitude());
}

function geoKO(err) {
if (err.code == 1) {
error('El usuario ha denegado el permiso para obtener informacion de ubicacion.');
} else if (err.code == 2) {
error('Tu ubicacion no se puede determinar.');
} else if (err.code == 3) {
error('TimeOut.')
} else {
error('No sabemos que pasó pero ocurrio un error.');
}
}

function showLatLong(lat, longi) {
var geocoder = new google.maps.Geocoder();
var yourLocation = new google.maps.LatLng(lat, longi);
geocoder.geocode({ 'latLng': yourLocation },processGeocoder);

}
function processGeocoder(results, status){

if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.forms[0].dir.value=results[0].formatted_address;
} else {
error('Google no retorno resultado alguno.');
}
} else {
error("Geocoding fallo debido a : " + status);
}
}
function error(msg) {
alert(msg);
}
</script>
</head>
<body>
<h1>Informaci&oacute;n de Geolocalizaci&oacute;n</h1>
<form>
<input type="button" onclick="getGeo()" value="Obtener Latitud y Longitud"/>
<input type="text" name="dir" width="150"/>
</form>
</body>
</html>

 

¡Pruebalo!

¡Descarga el código!

(Visited 7,571 times, 1 visits today)