Geo localización JavaScript

HTML5Javascript

Actualmente esta funcionalidad en las aplicaciones web y móviles se ha popularizado, ejemplos de esto son foursquere, Google Maps, Facebook entre otras.

Con HTML5 obtener la ubicación del usuario es muy fácil pero tenemos que tener en cuenta que no todos los dispositivos cuentan con un GPS que permite una localización más precisa por una triangulación de antenas y satélites, otros solo cuentan con conexión vía ISP y el navegador típicamente tomará esta información por IP o por triangulación de puntos de acceso Wi-Fi.

Para implementar la geo localización debemos asegurarnos de que el navegador soporta la API de geo localización de HTML5.

Para recuperar la localización del usuario haremos uso del objeto navigator.geolocation y la función básica para este caso es getCurrentPosition(), su sintaxis es :

getCurrentPosition(FuncionExito[,FuncionError],opciones);

FuncionExtito le dice al navegador al cual función debería llamar si los datos de localización han sido encontrados como disponibles. La función indicada toma los datos de la localización obtenida y actúa en consecuencia.

FuncionError, este parámetro llama a una función en curso de que la petición de localización falle por alguna razón que escapa de nuestro control. Es opcional pero es una buena práctica.

Opciones, aquí se maneja internamente a su vez tres parámetros opcionales que se encierran entre los símbolos «{ }».

enableHighAcurrency: indica al navegador que utilice una fuente de información exacta si está disponible. Los valores posibles son TRUE o FALSE. NOTA : Usted no puede controlar la fuente de información.
Timeout:Le indica el monto de máximo de tiempo del que dispone para calcular la posición actual. Si el cálculo no se completa en el tiempo indicado, la función de error se dispara. El valor se da en milisegundos.
maximumAge: Señala que tan vieja puede ser la información de localización antes de volver a recalcularla. El valor también se indica en milisegundos.

Ejemplo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
	<title>geo localizacion</title>
<script type="text/javascript">
function loadLocation () {
	//inicializamos la funcion y definimos  el tiempo maximo ,las funciones de error y exito.
	navigator.geolocation.getCurrentPosition(viewMap,ViewError,{timeout:1000});
}

//Funcion de exito
function viewMap (position) {
	
	var lon = position.coords.longitude;	//guardamos la longitud
	var lat = position.coords.latitude;		//guardamos la latitud

	var link = "http://maps.google.com/?ll="+lat+","+lon+"&z=14";
	document.getElementById("long").innerHTML = "Longitud: "+lon;
	document.getElementById("latitud").innerHTML = "Latitud: "+lat;

	document.getElementById("link").href = link;

}



function ViewError (error) {
	alert(error.code);
}	



	</script>
	
</head>
<body onload="loadLocation();">
<label id="long"></label> <br/>
<label id="latitud"></label> <br/>
<a id="link" target="_blank">Enlace al mapa</a>


</body>
</html>

<!DOCTYPE html>

<head>

<title>geo localizacion</title>

function loadLocation () {

//inicializamos la funcion y definimos el tiempo maximo ,las funciones de error y exito.

navigator.geolocation.getCurrentPosition(viewMap,ViewError,{timeout:1000});

}

//Funcion de exito

function viewMap (position) {

var lon = position.coords.longitude; //guardamos la longitud

var lat = position.coords.latitude; //guardamos la latitud

var link = "http://maps.google.com/?ll="+lat+","+lon+"&z=14";

document.getElementById("long").innerHTML = "Longitud: "+lon;

document.getElementById("latitud").innerHTML = "Latitud: "+lat;

document.getElementById("link").href = link;

}

function ViewError (error) {

alert(error.code);

}

</script>

</head>

<a id="link" target="_blank">Enlace al mapa</a>

</body>

</html>

Comentarios Facebook

Pingback: Obtener coordenadas un marcador google maps – Rodrigo Gómez

Hola quisiera guardar los datos que muestras en el label en un text por ejemplo este

document.getElementById(«long»).innerHTML = «Longitud: «+lon;

Saben de alguna manera de poder guardarlo en un text para luego guardarlo en una base de datos?

Ferios dice:

27 mayo, 2017 a las 4:35 pm

si estas trabando con asp o aspx utiliza ajax y ligalo a un evento, onclik, onchange o bien puedes ustilizar un setTimeOut para ir recargando el contenido y guardar las coordenas despues de cierto periodo de tiempo.

Rodrigo Gómez

Web developer