Como Geolocalizar un usuario con HTML5, primera parte

Una de las grandes habilidades de HTML5 es la parte de Geolocalizar un usuario con JavaScript,  la posibilidad de saber aproximadamente de donde nos visita un usuario através de un navegador, aun sin tener la computadora GPS como los Smart Phones.

Gracias a que los navegadores hacen el trabajo de tener una base de  datos con la ubicación aproximada de los usuarios ya sean identificados con su MAC o IP, JavaScript nos permite obtener su latitud y longitud entre otros datos para ser ubicados, aun que a veces no es muy exacta la Geolocalización, con este tutorial de como Geolocalizar un usuario con HTML5, vamos a mostrar como obtener los datos para ubicar un usuario.

Sintaxis para Geolocalizar

Para obtener los datos de ubicación hay una sintaxis muy sencilla de manejar y no es difícil de comprender si se tienen bases de programación, tenemos lo siguiente (para el ejemplo usamos jQuery), todo esto dentro de las etiquetas Script de HTML:

/*Funcion para geolocalizar*/
		function geolocalizar()
		{
			/*A la etitqueta P le escribimos un mensaje de espera*/
                       $("#estado").text("Buscandote...");
                       /*Funcion para obtener la geolocalizacion, Parametro de geolocalzacion: mostrar, Parametro de error: error*/
                       navigator.geolocation.getCurrentPosition(mostrar,error);
}

Con esta línea de código obtenemos la ubicación del usuario, donde “mostrar” es una función que se va a ejecutar cuando tenga listo los datos de ubicación y “error” es otra función que se va a ejecutar en dado caso de no tener los datos.

Funciones para mostrar los datos recibidos

Las funciones ejecutadas por esta sintaxis reciben un parámetro donde lleva los datos que necesitamos para mostrar la ubicación o el error que se produjo al ejecutarse, vamos a ver como se hace:

/*Funcion para obtener la geolocalizacion*/
		function mostrar(posicion)
		{
			/* posicion es el parametro que tiene los valores, las variables para latitud y longitud las obtenemos del parametro posicion.coords*/
			var lat = posicion.coords.latitude; //obtengo la latitud
			var lon = posicion.coords.longitude; //obtengo la longitud
			/*Escribir en la etiqueta las coordenandas*/
                        $("#estado").text("Te he encontrado, estas en: " + lat + " , " + lon);
		}

		/*Funcion para el error cuando no hay geolocalizacion*/
		function error(error)
		{
			//El parametro error tambien tiene valores de los errores exactos, pero aqui no lo usaremos.ç
                        $("#estado").text("No te encontre, pero lo voy a seguir intentando.");
		}

Estos sencillos pasos los podemos combinar con muchas aplicaciones, por ejemplo, Google Maps para mostrar un mapa con la ubicación, en la segunda parte de este tutorial vamos a mostrar como hacer, para que los valores de Latitud y Longitud las usemos para mostrar un mapa con la ubicación de un usuario mediante Canvas.

La demostración de este tutorial esta en este lugar Demo.