Geolocalización con HTML5 y Javascript

David Galisteo Cantero

Hay varias formas de geolocalización, por wifi, por GSM… etc, HTML5 utiliza las diferentes posibilidades para proporcionar nuestra ubicación a través del navegador, por wifi, el error máximo es 100 metros, por GSM, 500.

La localización por wifi se produce por la triangulación de los puntos donde se encuentran los routers que tenemos a nuestro alrededor, seguro que hemos visto alguna vez al coche de Google, ¿verdad?, pues también lleva una antena wifi escaneando los puntos de acceso y registrando su ubicación.

Bien, vamos al código:

var latitud, longitud;

function geolocalizar() {
	navigator.geolocation.getCurrentPosition(mostrarLoc,mostrarError);   
}

function mostrarError(error){                
	console.log(error);
}

function mostrarLoc(geo){                   
	latitud=geo.coords.latitude;
	longitud=geo.coords.longitude;

	document.write(latitud);
	document.write(" ");
	document.write(longitud);
}

geolocalizar();

El código es muy simple, en la función ‘geolocalizar’, el método ‘getCurrentPosition’ del objeto ‘navigator.geolocation’ se encarga de proporcionarnos la localización. A la función se le pasan 2 parámetros, una función que será llamada si se produce éxito, y otra llamada si se produce fracaso.

Tendremos que tenerlo alojado en un servidor web, ya que no funciona al tenerlo en local.

Vemos que en la última función nos devuelve los parámetros, latitud y longitud, vamos a google maps, copiamos las coordenadas y veremos a continuación cómo nos sitúa.

Si nuestra conexión es por cable, no funcionará bien (habrá más margen de error), deberemos tener activado el wifi, es probable que no nos situe exactamente donde estamos, si no con un pequeño margen.

Si queremos estas variables para situar en nuestra web un mapa, por ejemplo, podemos consultar el API de google para obtener uno, pasándole estos parámetros.

NOTA: Funciona mejor con Google Chrome que con los demás navegadores.

HackSaludos!!

Publicado el 31-01-2014

Donar

Si te ha sido de ayuda y quieres hacer una donación te lo agradeceremos :)

Compartelo!


2 comentarios

Deja un comentario

Comentanos

*

Ir arriba de la pagina