Geolocalización: Saber la posición física del usuario de tu web.

Ejemplo geolocalización


       ¿Qué es la geolocalización? Básicamente poder poner la posición de tus usuarios en un mapa. Los navegadores modernos soportan la funcionalidad para dar la posición geográfica del cliente si la conocen. En dispositivos móviles se utiliza el GPS, pero he probado en ordenadores de sobremesa y también sabe donde estoy, no se si utiliza información del ISP o de formularios que haya rellenado, cookies o qué, pero me localiza.

       ¿Y para qué nos sirve? Podemos pensar en webs que muestran automáticamente las ofertas de la tienda más cercana a tu posición. O servicios tipo farmacia más próxima, que son muy habituales en dispositivos móviles.

       Vamos a hacer un ejemplo en el que colocaremos una imagen de un mapa de Google señalando un par de ciudades (Teruel y Santander) en verde y si el usuario nos da su posición la mostraremos donde está en azul.

       La parte de HTML donde colocamos el mapa es:

<p style="text-align: center;">
<img id="mapa" alt="Ejemplo geolocalizaci&oacute;n"
src="http://maps.google.com/maps/api/staticmap?
&amp;size=800x500
&amp;sensor=false
&amp;maptype=roadmap
&amp;markers=color:green|label:A|Santander,+Cantabria,+Espa%C3%B1a
&amp;markers=color:green|label:B|Teruel,+Arag%C3%B3n,+Espa%C3%B1a">
</p>

       Solo con esto en una página veremos el mapa, de tipo carretera, centrado, con las medidas que hemos especificado (800 x 500 píxeles) y con Santander y Teruel marcados en el mapa.

       Ahora vamos a añadir la parte de javascript que añade la posición del usuario si nos da su geolocalización. Para hacer el trabajo dinámico se usa jquery, por lo que esta librería tiene que estar añadida.

<script type="text/javascript">
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    mostrarPosicion(position.coords.latitude, position.coords.longitude);
    });
}else{
    alert('No dispones de geolocalización, intenta usar otro navegador');
}
var mostrarPosicion = function(lat, lng){
    var nuevaPos = "&markers=color:blue|label:T|" + lat + "," + lng;
    var imagen = $("#mapa");
    var source = imagen.attr("src") + nuevaPos;
    imagen.attr("src", source.replace("sensor=false", "sensor=true"));
}
</script>

       La base de la geolocalización es usar el objeto position.coords, que tiene las coordenadas (longitud y latitud) de posicionamiento del usuario. Hacemos un comprobación previa para ver si el navegador soporta geolocalización y en caso contrario mostramos un mensaje. Una vez que tenemos la posición del usuario usamos el método mostrarPosicion para generar un nuevo mapa, aquí es donde entra jquey en acción para hacer más corto el código de la substitución.

       Cuando lo ejecutamos, vemos que el navegador nos pide permiso para dar nuestra posición (a menos que ya lo hayamos configurado previamente). El problema es que si rechazas dar tu posición no llega una señal de rechazo al código que sigue a la espera, por lo que en ese caso es difícil actuar de otra manera como podemos hacer si el navegador del cliente no soporta la funcionalidad. Podemos poner una función para el caso de error y usar un tiempo de espera, pero en mis pruebas no funciona demasiado bien todavía.

       Opera, Safari, Firefox, Chrome, Safari móvil, Android, Symbian, la mayoría de navegadores soportan esta funcionalidad hace bastantes años. Internet Explorer la soporta desde su versión 9, que no es todavía la más utilizada.

       Si queremos poder tener geolocalización en otros navegadores podemos usar alguna alternativa como por ejemplo:



       La segunda necesita registro, pero intenta dar la posición según la IP del usuario, aunque su navegador tenga bloqueada la geolocalización. Aún así estos dos métodos deberían ser una forma residual de dar servicio a navegadores antiguos y poco a poco ir desapareciendo para obtener soporte siempre según el API de geolocalización estándar.