HTML5 trae consigo muchas novedades y una de ellas es la integración con una nueva API de geolocalización. Dicha API no forma parte de forma estricta de HTML5, sino que está siendo normalizado por el Geolocation Working Group, que es independiente del HTML5 Working Group. El soporte para la API de geolocalización está disponible, de momento, para los navegadores más actuales como Firefox 3.5+ o Chrome 5+.
Un modo sencillo de acceso al API de geolocalización sería:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>
Ver ejemplo en funcionamiento » »
Con el anterior ejemplo, si el navegador soporta el acceso a la API, el usuario da su consentimiento y... no hay ningún problema se obtiene la geolocalización del usuario al hacer click sobre el enlace "Mostrar Posición".
Puesto que el éxito de la geolocalización depende de varios factores, lo mejor es gestionar los posibles errores que se puedan producir. Podemos añadir un segundo argumento a la función obtener_localizacion: una función para gestionar los errores. Los errores que se pueden obtener son:
Permiso denegado (1), cuando el usuario no comparte la posición y por tanto deniga el acceso a su localización.
Posición no disponible (2), si se ha perdido la conexión o no se puede contactar con los satélites que realizan el posicionamiento.
Timeout (3), si se ha tardado demasiado en calcular la posición del usuario.
Error desconocido (0), si ha fallado cualquier otra cosa.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
if (err.code == 0) {
alert("error desconocido");
}
if (err.code == 1) {
alert("El usuario no ha compartido su posicion");
}
if (err.code == 2) {
alert("no se puede obtener la posicion actual");
}
if (err.code == 3) {
alert("timeout recibiendo la posicion");
}
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>
Ver ejemplo en funcionamiento » »
Con el ejemplo anterior controlamos los errores durante el proceso de geolocalización pero no controlamos si el navegador soporta o no este servicio. Para hacer este último control podemos comprobar si existe el objeto navigator.geolocation.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
}else{
alert('Tu navegador no soporta la API de geolocalizacion');
}
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
if (err.code == 0) {
alert("error desconocido");
}
if (err.code == 1) {
alert("El usuario no ha compartido su posicion");
}
if (err.code == 2) {
alert("no se puede obtener la posicion actual");
}
if (err.code == 3) {
alert("timeout recibiendo la posicion");
}
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>
Ver ejemplo en funcionamiento » »
Una vez hemos obtenido las coordenadas mediante la API es bastante sencillo integrar Google Maps para mostrar un mapa con la posición del visitante. El siguiente ejemplo utiliza jQuery para crear un mapa una vez obtenida la posición mediante la API de geolocalización.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
function obtener_localizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas,gestiona_errores);
}else{
alert('Tu navegador no soporta la API de geolocalizacion');
}
}
function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
alert('Tus coordenadas son: ('+latitud+','+longitud+')');
}
function gestiona_errores(err) {
if (err.code == 0) {
alert("error desconocido");
}
if (err.code == 1) {
alert("El usuario no ha compartido su posicion");
}
if (err.code == 2) {
alert("no se puede obtener la posicion actual");
}
if (err.code == 3) {
alert("timeout recibiendo la posicion");
}
}
</script>
<a href="javascript:obtener_localizacion();">Mostrar Posición</a>
</body>
</html>
