El nuevo estandar HTML5 permite detectar la geolocalizaci\u00f3n del usuario de una p\u00e1gina o aplicaci\u00f3n web de forma extremadamente sencilla. Este hecho, unido a la acelerada expansi\u00f3n del uso de internet en los m\u00f3viles que se est\u00e1 produciendo en los \u00faltimos a\u00f1os, abre nuevas y excitantes posibilidades al desarrollo de p\u00e1ginas web. As\u00ed, con el uso de HTML5 es posible, con relativa facilidad, ofrecer al usuario informaci\u00f3n sobre productos, servicios, eventos, etc, de forma personalizada, en funci\u00f3n de su ubicaci\u00f3n f\u00edsica.<\/p>\n
La detecci\u00f3n de la geolocalizaci\u00f3n del usuario se lleva a cabo en HTML5 gracias a una potente API JavaScript<\/a> muy f\u00e1cil de usar. La utilizaci\u00f3n de esta API, combinada con el uso de Google Maps o Yahoo Maps, hace posible que los desarrolladores web puedan situar al usuario sobre un mapa y guiarle con precisi\u00f3n o simplemente mostrarle lugares cercanos que puedan ser de su inter\u00e9s.<\/p>\n A continuaci\u00f3n voy a exponer un ejemplo pr\u00e1ctico de esta API que pone de manifiesto la sencillez de su uso.<\/p>\n Resumiendo, el c\u00f3digo realiza el siguiente trabajo:<\/p>\n Al final del c\u00f3digo javascript se sit\u00faa la llamada a la Geolocation API:<\/p>\n Este bucle condicional lo que hace es ‘preguntar’ al navegador si soporta la Geolocation API. En caso afirmativo, se realiza la llamada a la funci\u00f3n En la funci\u00f3n En la funci\u00f3n En caso de que recibamos con \u00e9xito las coordenadas de posici\u00f3n del usuario (que nos son entregadas a trav\u00e9s del objeto En las l\u00edneas 2 y 3 sustituimos el texto contenido en el html #status (‘Buscando su localizaci\u00f3n…’) por ‘\u00a1Le encontramos!’.<\/p>\n El resto de la funci\u00f3n es un ejemplo de uso sencillo de la API de Googlemaps:<\/p>\n La funci\u00f3n error se limita a mostrar en el html Este sencillo ejemplo de uso de la API Geolocation expuesto aqu\u00ed admite desarrollos mucho m\u00e1s complejos. Para empezar se puede recabar m\u00e1s informaci\u00f3n acerca de la situaci\u00f3n del usuario, m\u00e1s all\u00e1 de sus coordenadas. El objeto A continuaci\u00f3n se muestran las propiedades del objetito Para terminar, comentar que adem\u00e1s de la funci\u00f3n Por tanto, la funci\u00f3n Es importante destacar que el usuario debe dar su consentimiento antes de enviar sus cooordenadas de posici\u00f3n a cualquier medio que lo reclame. Esto se implementa de forma aut\u00f3m\u00e1tica por los navegadores que soportan la geolocalizaci\u00f3n: al cargar la p\u00e1gina, el navegador muestra una ventana de di\u00e1logo en el que se informa al usuario de que la web est\u00e1 reclamando su ubicaci\u00f3n f\u00edsica y se le da la opci\u00f3n de aceptar o denegar esta petici\u00f3n.<\/p>\n Resulta evidente que la extensi\u00f3n del uso de HTML5 y consiguiente posibilidad de geolocalizar al usuario van a revolucionar el ya ancho campo del desarrollo de p\u00e1ginas y aplicaciones web. Como hemos se\u00f1alado al principio de este art\u00edculo, la posibilidad de mostrar al usuario productos y lugares de su inter\u00e9s cercanos a su ubicaci\u00f3n f\u00edsica abre un nuevo horizonte comercial para fabricantes, comerciantes y cualquiera que tenga informaci\u00f3n de inter\u00e9s que ofrecer a los internautas.<\/p>\n Es cierto que la geolocalizaci\u00f3n con HTML5 s\u00f3lo funciona en las nuevas generaciones de navegadores que han adoptado el nuevo est\u00e1ndar: Firefox 3.5+, Chrome, Opera, Safari, . Afortunadamente, la velocidad de actualizaci\u00f3n de los usuarios al uso de navegadores de \u00faltima generaci\u00f3n es cada d\u00eda mayor, por lo que est\u00e1 creciendo con gran rapidez el n\u00famero de potenciales usuarios de esta nueva tecnolog\u00eda. El nuevo estandar HTML5 permite detectar la geolocalizaci\u00f3n del usuario de una p\u00e1gina o aplicaci\u00f3n web de forma extremadamente sencilla. Este hecho, unido a la acelerada expansi\u00f3n del uso de internet en los m\u00f3viles que se est\u00e1 produciendo en los … Sigue leyendo Demostraci\u00f3n<\/h3>\n
\n
C\u00f3digo<\/h3>\n
<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n<meta charset=ISO-8859-1 \/>\r\n<title>Geolocalizaci\u00f3n con HTML5<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Geolocalizaci\u00f3n con HTML5<\/h1>\r\n\r\n<script src=\"http:\/\/maps.google.com\/maps\/api\/js?sensor=false\" type=\"text\/javascript\"><\/script>\r\n\r\n<script>\r\nfunction success(position) {\r\n var status = document.querySelector('#status');\r\n status.innerHTML = \"\u00a1Le encontramos!\";\r\n\r\n var mapcanvas = document.createElement('div');\r\n mapcanvas.id = 'mapcanvas';\r\n mapcanvas.style.height = '400px';\r\n mapcanvas.style.width = '560px';\r\n\r\n document.querySelector('#map').appendChild(mapcanvas);\r\n\r\n var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);\r\n var myOptions = {\r\n zoom: 15,\r\n center: latlng,\r\n mapTypeControl: false,\r\n navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n };\r\n var map = new google.maps.Map(document.getElementById(\"mapcanvas\"), myOptions);\r\n\r\n var marker = new google.maps.Marker({\r\n position: latlng,\r\n map: map,\r\n title:\"Usted est\u00e1 aqu\u00ed.\"\r\n });\r\n}\r\n\r\nfunction error(msg) {\r\n var status = document.getElementById('status');\r\n status.innerHTML= \"Error [\" + error.code + \"]: \" + error.message; \r\n}\r\n\r\nif (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});\r\n} else {\r\n error('Su navegador no tiene soporte para su geolocalizaci\u00f3n');\r\n}\r\n\r\n<\/script>\r\n\r\n<p id=\"status\">Buscando su localizaci\u00f3n...<\/p>\r\n<div id=\"map\"><\/div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n\n
Llamada a la Geolocation API<\/h3>\n
if (navigator.geolocation) {\r\n navigator.geolocation.getCurrentPosition(success, error,{maximumAge:60000, timeout: 4000});\r\n} else {\r\n error('Su navegador no tiene soporte para su geolocalizaci\u00f3n');\r\n}<\/pre>\ngetCurrentPosition<\/code>, mediante la cual se intenta obtener de forma as\u00edncrona las coordenadas de posici\u00f3n del usuario. En caso contrario, se muestra una ventana de alerta en la que se advierte al usuario de que su navegador no soporta su geolocalizaci\u00f3n.<\/p>\ngetCurrentPosition<\/code> se definen a su vez dos funciones (success<\/code> y error<\/code>), que veremos m\u00e1s adelante, y con las que se gestionar\u00e1 que es lo que se har\u00e1 en caso de que todo vaya bien y obtengamos las coordenadas de posici\u00f3n del usuario o bien cu\u00e1l ser\u00e1 el camino a seguir si este intento fracasa.<\/p>\ngetCurrentPosition<\/code> incluimos adem\u00e1s dos par\u00e1metros:<\/p>\n\n
timeout<\/code>: Indicamos cu\u00e1l es el tiempo m\u00e1ximo de espera para obtener las coordenadas del usuario (en milisegundos). Establecemos un valor de 4 segundos.<\/li>\nmaximumAge<\/code>: Indica la m\u00e1xima antig\u00fcedad de la posici\u00f3n cacheada del usuario (en milisegundos). Si el valor no est\u00e1 definido o es cero significa que debemos obtener la posici\u00f3n actual. Establecemos un valor de 60 segundos.<\/li>\n<\/ul>\nMapa Google centrado en la posici\u00f3n del usuario<\/h3>\n
position<\/code>: position.coords.longitude<\/code> y position.coords.latitude<\/code>), pasamos a ejecutar la funci\u00f3n success<\/code>. Esta funci\u00f3n lo que hace es informar al usuario de que efectivamente lo hemos geolocalizado y utizamos la API de Googlemaps<\/a> para mostrar un mapa con su posici\u00f3n en el centro del mismo.<\/p>\nfunction success(position) {\r\n var status = document.querySelector('#status');\r\n status.innerHTML = \"\u00a1Le encontramos!\";\r\n\r\n var mapcanvas = document.createElement('div');\r\n mapcanvas.id = 'mapcanvas';\r\n mapcanvas.style.height = '400px';\r\n mapcanvas.style.width = '560px';\r\n\r\n document.getElementById('map').appendChild(mapcanvas);\r\n\r\n var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);\r\n\r\n var myOptions = {\r\n zoom: 15,\r\n center: latlng,\r\n mapTypeControl: false,\r\n navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},\r\n mapTypeId: google.maps.MapTypeId.ROADMAP\r\n };\r\n\r\n var map = new google.maps.Map(document.getElementById(\"mapcanvas\"), myOptions);\r\n\r\n var marker = new google.maps.Marker({\r\n position: latlng,\r\n map: map,\r\n title:\"Usted est\u00e1 aqu\u00ed.\"\r\n });\r\n}<\/pre>\n\n
div#map<\/code>) que contendr\u00e1 el mapa Google que crearemos a continuaci\u00f3n, y concretamos las dimensiones que tendr\u00e1.<\/li>\n#map<\/code> dentro de un elemento html ya existente.<\/li>\ngoogle.maps.Map<\/code>), y definimos el objeto html en el que se situar\u00e1 junto con los par\u00e1metros del mismo establecidos anteriomente.<\/li>\nError<\/h3>\n
#status<\/code> el c\u00f3digo y mensaje de error recibidos en caso de que no se pueda obtener las coordenadas del usuario.<\/p>\nfunction error(msg) {\r\n var status = document.getElementById('status');\r\n status.innerHTML= \"Error [\" + error.code + \"]: \" + error.message; \r\n}<\/pre>\nOtras propiedades de getCurrentPosition()<\/h3>\n
position<\/code> devuelto por getCurrentPosition<\/code> puede contener otras propiedades, como la altitud o velocidad de desplazamiento del usuario. Sin embargo, hoy por hoy pocas veces se obtienen valores precisos al respecto.<\/p>\nPosition<\/code> devuelto por la funci\u00f3n getCurrentPosition<\/code>:<\/p>\n\n
\n \nPropiedad<\/th>\n Valor<\/th>\n<\/tr>\n<\/thead>\n \n coords.latitude<\/th>\n Latitud, en grados decimales<\/td>\n<\/tr>\n \n coords.longitude<\/th>\n Longitud, en grados decimales<\/td>\n<\/tr>\n \n coords.altitude<\/th>\n Altitud, en metros<\/td>\n<\/tr>\n \n coords.accuracy<\/th>\n Nivel de precisi\u00f3n de las coordenadas, en metros.<\/td>\n<\/tr>\n \n coords.altitudeAccuracy<\/th>\n Nivel de precisi\u00f3n de la altitud, en metros.<\/td>\n<\/tr>\n \n coords.heading<\/th>\n Direcci\u00f3n en la que se desplaza el aparato que proporciona las coordenadas, en grados (de 0\u00ba a 360\u00ba), comenzando desde el norte y contando en el sentido de las agujas del reloj.<\/td>\n<\/tr>\n \n coords.speed<\/th>\n Velocidad de desplazamiento del aparato, en metros por segundo<\/td>\n<\/tr>\n \n timestamp<\/th>\n Momento en que la posici\u00f3n fue adquirida, en formato timestamp.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n La funci\u00f3n watchPosition()<\/h3>\n
getCurrentPosition<\/code> (que como hemos visto proporciona informaci\u00f3n sobre la situaci\u00f3n del usuario en un punto determinado del tiempo y el espacio), la API Geolocation especifica la funci\u00f3n watchPosition<\/code>, que facilita informaci\u00f3n acerca del movimiento<\/em> del usuario, es decir, podemos seguir al usuario y conocer sus cambios de posici\u00f3n.<\/p>\nwatchPosition<\/code> ser\u00e1 de gran utilidad en el caso de que el usuario utilize un dispositivo m\u00f3vil. Por otro lado, el uso de ambas funciones es muy similar.<\/p>\nPrivacidad<\/h3>\n
Conclusi\u00f3n<\/h3>\n
\n<\/p>\n","protected":false},"excerpt":{"rendered":"