html5_geolocalizacion

8/6/2019 html5_Geolocalizacion

1/11

1

Geolocalizacin

GEOLOCALIZACIN

INTRODUCCIN

Se llama geolocalizacin a la tecnologa capaz de situar un lugar en el mundo. Lalocalizacin de un usuario es una operacin cada da ms utilizada en las

aplicaciones Web, sobre todo en los dispositivos mviles, ya que uno de

los principales objetivos de la informacin que se muestra en este tipo dedispositivos est relacionada con contenidos y puntos de inters en su

entorno fsico ms cercano. Por ejemplo, utilizando geolocalizacin se

puede desarrollar una campaa publicitaria donde la informacin sea

diferente segn donde est situado el usuario.

Hay muchas maneras de realizar localizar a un usuario, las ms

habituales utilizan alguno de estos datos:

la direccin IP del equipo, la conexin de red inalmbrica a la que se est conectado, las antena de telefona mvil del telfono que se est utilizando, mediante hardware GPS que recibe la informacin de latitud y

longitud de los satlites.

Hasta ahora una forma habitual de localizar la situacin de un usuario era utilizar la

localizacin IP, esta operacin implicaba el mantenimiento de grandes bases de datos de

direcciones IPs que deban ser continuamente actualizadas. Servicios Web como

http://www.maxmind.com/ ofrecen la tecnologa necesaria para realizar este tipo deoperaciones.

Google ha conseguido que HTML5 soporte funciones de geolocalizacin basndose

en Google Maps. En el funcionamiento de Google Maps intervienen HTML, CSS y

JavaScript. Los mapas son imgenes que se cargan a travs depeticiones AJAX1 y se insertan en una capa (div) de la pgina

Web. A la vez que se navega por el mapa, la API enva

informacin relacionada con las nuevas coordenadas y elzoom aplicado a travs de AJAX a la base de datos que

contiene la informacin de geolocalizacin y devuelve la

imagen requerida.

1 Asynchronous JavaScript And XML (JavaScript asncrono y XML) es una tcnica utilizada en el

desarrollo Web que permite realizar peticiones asncronas al servidor. Esta tcnica permite modificar el

contenido parcial de la pgina Web sin que esta operacin implique una recarga de toda la pgina. Para saber

ms ir a http://es.wikipedia.org/wiki/AJAX
http://www.maxmind.com/http://www.maxmind.com/http://www.maxmind.com/


2/11

2

Geolocalizacin

Las especificaciones para la geolocalizacin desarrolladas por Google se recogen en

unaAPI. En este caso la geolocalizacin no se basa en un servicio Web o en una base dedatos como se haca hasta ahora, sino que es el navegador (navigator) el encargado dedetectar la latitud y longitud de la posicin actual del usuario. La instruccin JavaScript

clave para averiguar las coordenadas del usuario es la siguiente:

navigator.geolocation.getCurrentPosition(mostrarMapa,errorMapa);

Siendo mostrarMapa y errorMapa funciones que muestran el mapa y la actuacin

ante un error respectivamente.

Las coordenadas del usuario se extraen de la red WIFI a la que estn conectados o del

GPS que tenga instalado. Hoy por hoy todos los dispositivos mviles tienen soporte paraestos sistemas.

Antes de que hubiera una API publica para manipular Google Maps, algunosdesarrolladores haban conseguido hackear

2su uso para incorporar mapas a sus propias

Webs. Ante esta situacin Google adopt la estrategia de crear una API pblica.

En este tema veremos las caractersticas de laAPIque permite que los navegadorescon capacidad geolocalizacin (las ltimas versiones de los navegadores ms utilizados)

puedan detectar el lugar desde donde estn situados fsicamente con mayor o menorprecisin.

Para detectar si el navegador soporta la API de geolocalizacin se puede utilizar el

siguiente cdigo JavaScript

if (navigator.geolocation){

//El navegador lo soporta y se puede operar con la API degeolocalicacin

}else {

//En navegador no lo soporta y se deben especificar alternativas}

ACCESO A LAS COORDENADAS DE UNA LOCALIZACIN

Iniciaremos el estudio de la geolocalizacin analizando los elementos necesarios paraaveriguar las coordenadas (latitud y longitud) donde se est ejecutando un navegador. Para

ello utilizaremos cdigo JavaScritp en el bloque del cdigo HTML.

El objeto navigator del DOM permite el acceso a un objeto llamado geolocation quedispone del mtodo getCurrentPosition que permite averiguar las coordenadas actuales.En el siguiente cdigo veremos el funcionamiento del objeto navigator.geolocation.

2 Es la accin de explorar y buscar mtodos para saltarse las limitaciones de uso o seguridad de una

mquina o de un programa para utilizarlo no siempre de manera lcita.
http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/http://www.w3.org/TR/geolocation-API/


3/11

3

Geolocalizacin

//Se llama a la funcin al activar el enlacefunctionlocalizarCoordenadas() {

navigator.geolocation.getCurrentPosition(mostrarCoordenadas);}

//Se llama a la funcin al ejecutar getCurrentPosition(coordenadas)functionmostrarCoordenadas(posicion) {

//Calcula las coordenadasvar latitud= posicion.coords.latitude;var longitud =posicion.coords.longitude;

//Muestra los valores por pantallaalert('Tus coordenadas son: ('+latitud+','+longitud+')');

}Mostrar localizacin

El cdigo del ejemplo muestra un enlace que llama a la funcin

localizarCoordenadas() que contiene la siguiente orden:

navigator.geolocation.getCurrentPosition(mostrarCoordenadas);

La ejecucin del mtodo getCurrentPosition(mostrarCoordenadas) implica unallamada a la funcin que se le pasa por parmetro, es decir a la funcin

mostrarCoordenadas (). Esta funcin tiene a su vez un parmetro de entrada (se denomina

posicion pero puede llamarse de cualquier manera) que permite el acceso a la latitud y lalongitud mediante las siguiente instrucciones:

functionmostrarCoordenadas(posicion) {var latitud= posicion.coords.latitude;var longitud =posicion.coords.longitude;alert('Tus coordenadas son: ('+latitud+','+longitud+')');

}

Para finalizar el cdigo muestra en una ventana emergente la latitud y la longitud por

medio de la instruccin JavaScript alert().

Navegadores como Firefox o Safari muestran una ventana emergente en elmomento en que la pgina Web solicita una geolocalizacin para permitir al usuario aceptaro denegar la operacin. A continuacin se muestra la ventana que aparece en Firefox para

estos casos.


4/11

4

Geolocalizacin

Observa en un navegador, por ejemplo en Firefox, las coordenadas donde estssituado y a continuacin busca en Google Maps tu posicin. Para ello debes ir aGoogleMaps e introducir en el cuadro de bsqueda las coordenadas tal y como se muestra acontinuacin, al pulsar sobre el botn Buscar en Maps se mostrar el mapa del lugardonde ests situado.

GESTIN DE ERRORES

En el caso de no poderse averiguar las coordenadas desde una pgina Web se debentomar medidas para informar al usuario del motivo. La API de geolocalizacin permite

gestionar los errores por medio del mtodo navigator.geolocation.getCurrentPosition(),que permite pasar por parmetro una funcin para detectar y manejar los fallos.

navigator.geolocation.getCurrentPosition (mostrarCoordenadas,mostrarError)

La instruccin anterior ejecuta la funcin

mostrarCoordenadas() si la operacin se resuelva sin incidentes,en caso contrario se ejecuta la funcin mostrarError().

La funcin mostrarError() recibe un parmetro de entradaque permite el acceso a la propiedad code, cuyo valor numrico secorresponde con uno de los errores siguientes:

Error no identificado (0), se activa cuando
http://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wl


5/11

5

Geolocalizacin

no se puede identificar el tipo de error.

Permiso denegado (1), se produce cuando el usuario no ha dadoautorizacin a la operacin en los navegadores que la solicitan.

Posicin no disponible (2), se produce cuando no se puedeaveriguar la posicin por problemas en la red o en los satlites.

Tiempo de espera superado (3), se activa cuando ha tardado msde lo estipulado en la averiguacin de la posicin.La funcin mostrarError() se puede implementar de la siguiente manera

function mostrarError (elError){

//El parmetro de la function contiene la propiedad code con elerror producido

switch (elError.code){case 0:

alert(No se ha podido averiguar la localizacin. Error desconocido");break

case 1:

alert(No se ha podido averiguar la localizacin. Permiso denegado");break

case 2:alert(No se ha podido averiguar la localizacin. Posicin no disponible");break

case 3:alert(No se ha podido averiguar la localizacin. Tiempo de espera

superado");break

}}

En la siguiente imagen se puede ver la ventana que muestra el navegador Safaricuando una pgina Web demanda una operacin de geolocalizacin. Si el usuario no

permite la operacin, se ejecuta la funcin implementada para el control de errores: en

nuestro caso se mostrara una ventana emergente con el mensaje establecido.

Agrega la funcin del ejemplo al ejercicio anterior y realiza comprobaciones delos errores utilizando Firefox o Safari para ello.


6/11

6

Geolocalizacin

PASOS PARA MANEJAR GOOGLE MAPS DESDE LA WEB

Carga de la API de Google Maps

Google ha puesto a disposicin de los desarrolladores un archivo JavaScript que

carga todos los smbolos y las definiciones que se necesitan para utilizar la API de Google

Maps v. 3 de geolocalizacin. Para utilizar este archivo en un documento HTML esnecesario incluir este cdigo independiente de cualquier otro bloque

La variable sensor que se indica en esta instruccin puede tener dos valores: true ofalse. Si se indica que su valor es true, entonces se cargan los mapas que pueden controlaruna localizacin mvil, en el caso de ser false, slo se dispone de mapas estticos.

En una pgina Web, dentro del bloque definido por las etiquetas, se pueden implementar varios bloques de script cada uno con su etiqueta

de apertura a y cierre:

Lugar donde mostrar el mapa

Para mostrar un mapa en una pgina Web es necesario utilizar una capa (< div>) conun tamao concreto, para ello podemos utilizar el atributo style, por ejemplo:

La etiqueta debe estar identificada por un valor del atributo id para poder hacerreferencia a la misma desde JavaScript.

Los valores que se asignan a width y height pueden ser en pixeles o en %. En elejemplo anterior se indicaba que la capa deba ser de un tamao de 400x500 pixeles y en el

siguiente ejemplo, los valores asignados de ancho y alto especifican que el mapa debeampliarse hasta que ocupe el 100% de la pantalla del navegador.

Creacin de una varible de coordenadas

Para utilizar la geolocalizacin en un mapa es necesario crear un objeto que contengalas variables de las coordenadas. La API de Google Maps permite la creacin de objetos

LatLng que contienen la latitud y longitud de la posicin actual, para construir un objeto deeste tipo se utiliza una instruccin JavaScript como la que sigue:

var miCoordenada = new google.maps.LatLng(miLatitud, miLongitud)Este valor ser necesario para implementar las opciones del mapa, como veremos a

continuacin.


7/11

7

Geolocalizacin

Definicin de las opciones iniciales del mapa

En muchas llamadas a la API de Google Maps es necesario crear un objeto

MapOptions que contenga las valores de inicio indicando que zona queremos ver centradaen el mapa y como queremos verlo.

Un objeto MapOption es una variable JavaScript a la que se le asignan una serie devalores entre llaves y separadas por comas, por ejemplo:

var miOpcion={zoom:16,center: miCoordenada,//var creada a partir de google.maps.LatLng()mapTypeId:google.maps.MapTypeId.ROADMAP

};

Donde

zoom: indica el zoom inicial, el rango posible de valores estn entre1 y 23.

center: indicar el lugar que estar en el centro de la imagen, vienedeterminado por unas coordenadas (latitud y longitud).

mapTypeId: determina el tipo de mapa que se va a mostrar. Laindicacin del tipo de mapa siempre es obligatoria en la versin 3 de

la API y se pueden especificar 4 tipos de mapas:

ROADMAP muestra el mapa ms comn de 2D con las carreteras, losnombres de las calles, las ciudades, etc.

SATELLITE muestra el mapa con fotografa satlite. HYBRID muestra una combinacin los mapas ROADMAP y

SATELLITE.

TERRAIN muestra el mapa con informacin fsica relacionada con elrelieve, los ros, las montaas, etc.

Dibujo del mapa en la Web

Si ya se tienen una capa con un tamao asignado para mostrar el mapa y unasopciones iniciales se puede dar la orden de pintar el mapa por medio de la siguiente orden

var mapa = new google.maps.Map (document.getElementById("hMapa"),miOpcion)

Donde hMapa es la id de la capa donde se va a mostrar el mapa y miOpcion es una

variable de tipo MapOptions que contiene las caractersticas de visualizacin del mismo.Se pueden crear varias variables a partir de google.maps.Map() para dibujar distintos

mapas en una pgina Web.


8/11

8

Geolocalizacin

MOSTRAR UN MAPA A PARTIR DE UNAS COORDENADAS

No slo se puede acceder a los mapas de Google utilizando su aplicacin Google

Maps, sino que tambin se pueden incluir mapas de este tipo en cualquier pgina Web.

Si disponemos de las coordenadas de una localizacin, hacer una pgina Web que

muestre ese lugar en un mapa tipo Google Maps es muy sencillo.

//Que se ejecute al cargar la pgina Webwindow.onload=function() {

//Crear una variable/instancia a partir de unas coordenadasvar miCoordenada = new google.maps.LatLng(19.000,-79.000);

//Crear las opciones de visualizacin del mapavar miOpcion = {zoom: 6,

center: miCoordenada,mapTypeId: google.maps.MapTypeId.ROADMAP};

//Dibujar el mapavar miMapa = new

google.maps.Map(document.getElementById("hMapa"), miOpcion);}

Localizacin

Para conocer la latitud y la longitud de un punto utilizando Google Maps, enprimer lugar, se debe localizar el punto deseado en el mapa, a continuacin es necesario

centrar ese punto con la herramienta disponible para mover el mapa: y, para finalizar,

en la barra de direcciones del navegador, se debe introducir la siguiente orden JavaScript

javascript:void(prompt('',gApplication.getMap().getCenter()));Como resultado se mostrar una ventana emergente con la informacin requerida

(latitud, longitud)
http://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wlhttp://maps.google.es/maps?hl=es&tab=wl


9/11

9

Geolocalizacin

En base al cdigo del ejemplo, localiza las coordenadas donde ests situado enGoogle Maps y comprueba el buen funcionamiento del ejemplo anterior utilizando tu

localizacin en la instruccin

new google.maps.LatLng (latitud, longitud)

USAR MARCADORESYa hemos visto como mostrar un mapa cuyo punto central se corresponde con las

coordenadas resultado de la geolocalizacin del usuario. Para identificar este punto sepueden usar marcadores.

Un marcador es una imagen pequea que est posicionada en un lugar especfico del

mapa en Google Maps. Esta imagen puede ser la estndar utilizada por Google o una

imagen personalizada. En la siguiente imagen podemos ver como un marcador estndarseala a la ciudad de Budapest en el Mapa.

Para crear un marcador es necesario utilizar crear un objeto del tipo

google.maps.Marker() como se ve a continuacin.

var miMarcador= new google.maps.Marker(MarkerOptions)

Donde MarkerOptions es una variable que especifica las propiedades iniciales del

marcador, por ejemplo:

var miOpcionMarker={position: miCoordenada,map: miMapa,title: texto


10/11

10

Geolocalizacin

}

Donde posicion se corresponde con un objeto del tipo google.maps.LatLng() quedetermina la coordenada donde se quiere situar el marcador; map es una referencia del tipo

google.maps.Map() que almacena el mapa que se va a mostrar y title es el texto que semuestra cuando el usuario sita el cursor sobre el marcador.

A continuacin se muestra el cdigo de una pgina Web donde se detecta el lugardesde donde accede el usuario y muestra el mapa con el marcador correspondiente

//Que se ejecute al cargar la pgina Webfunction mostrarMapaMarcador(position) {

//almacenar las coordenadas en variablesvar latitud = position.coords.latitude;var longitud = position.coords.longitude;

//Crear una variable/instancia a partir de unas coordenadasvar miCoordenada = new google.maps.LatLng(latitud,longitud);

//Crear las opciones de visualizacin del mapavar miOpcionMapa = {zoom: 13,

center: miCoordenada,mapTypeId: google.maps.MapTypeId.ROADMAP};

//Dibujar el mapavar miMapa = new

google.maps.Map(document.getElementById("hMapa"), miOpcionMapa);//Crear las opciones de visualizacin del marcadorvar miOpcionMarker={

position: miCoordenada,map: miMapa,title: "Aqu estamos"

}//Crear un objeto marcadorvar miMarcador=new google.maps.Marker(miOpcionMarker);

}

//Se ejecuta al cargar el documento Webwindow.onload=function() {

navigator.geolocation.getCurrentPosition(mostrarMapaMarcador);}Localizacin


11/11

11

Geolocalizacin

Se puede cambiar la imagen del marcador aadiendo a las MarkerOptionscorrespondientes la opcin icon: ruta de la imagen como podemos ver en el ejemplo:

//Crear las opciones de visualizacin del marcadorvar miOpcionMarker={

position: miCoordenada,map: miMapa,title: "Aqu estamos",icon:icono.jpg

}//Crear un objeto marcadorvar miMarcador=new google.maps.Marker(miOpcionMarker);

Prueba el cdigo del ejemplo para tu localizacin y para unas coordenadas dadasque hayas localizado previamente en Google Maps.

Implementa una pgina Web que detecte las coordenadas de tu localizacin ymuestre el mapa correspondiente con un marcador personalizado. La pgina Web debe

incluir control de errores.

html5_geolocalizacion

Documents