Este tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5.
Nivel: Medio
¿Qué es la geolocalización?
Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.
Conociendo nuestra posición
Esta API destaca por lo fácil que es usarla. Por ejemplo:
Código :
<script>
function localizame() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(){
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
}
</script>
Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición
Controlando errores
Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
</script>
Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function errores(err) {
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
</script>
Combinando la API de geolocalización con la API de Google Maps
Veamos los pasos directamente sobre los comentarios del código:
Código :
<!DOCTYPE html>
<html>
<head>
<title>Localizador</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
<style>
body{
font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>Localizador mediante HTML5</h1>
</header>
<section>
<article>
<div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
</article>
</section>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/
<script type="text/javascript">
var map;
var latitud;
var longitud;
$(document).ready(function() {
localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
});
function localizame() {
if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function coordenadas(position) {
latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
cargarMapa();
}
function errores(err) {
/*Controlamos los posibles errores */
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
function cargarMapa() {
var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
var myOptions = {
zoom: 17,
center: latlon, /* Definimos la posicion del mapa con el punto */
mapTypeId: google.maps.MapTypeId.ROADMAP
};/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */
var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */
var marcador = new google.maps.Marker({
/*Creamos un marcador*/
position: coorMarcador, /*Lo situamos en nuestro punto */
map: map, /* Lo vinculamos a nuestro mapa */
title: "Dónde estoy?"
});
}
</script>
</body>
</html>
Pincha aquí para ver el ejemplo completo.
Sobre los fallos de exactitud
La API de geolocalización no es más que una interfaz que nos entrega los datos de localización que nuestro dispositivo nos puede ofrecer. Esta es la clave: los que el dispositivo ofrece.
Si tu dispositivo es un pc sobremesa, casi seguro que la localización la realizará en base a la geolocalización IP, el más básico de los métodos, que puede incluso dar resultados a cientos de Km. Sin embargo si tenemos un smartphone, las coordenadas podrán responder a una triangulación en base a las redes móviles cercanas. En el mejor de los casos (wow, tengo un iPhone o cualquier otro smartphone Android de gama media / alta) el dispositivo dispondrá de GPS con lo cual la localización será casi perfecta (menos de 20m de exactitud).
Por otro lado el navegador es quien decide qué sistema de localización usar en base a su propia tabla de prioridades.
En resumen:
- Si quiero hacer una aplicación HTML5 para dispositivos móviles que me localize los restaurantes cercanos, la geolocalización es genial.
- Si quiero hacer una página que me corrobore que estoy delante del pc de mi casa, la geolocalización es una mierda.
Antonio Navajas
Antonio Navajas es desarrollador front-end, diseñador y formador ocasional. Apasionado por la tecnología, el diseño y en general por la cultura geek, colabora activamente en varios proyectos relacionados con la web, la formación y el diseño.
Follow Me:
