Uso de geolocation

En este artículo explicamos el funcionamiento, uso e implementación de la aplicación geolocation mediante JavaScript.

Desde hace unos años, los temas relacionados con la experiencia del usuario, han venido tomando un alto grado de relevancia en la toma de decisiones de un proyecto de desarrollo. Esta búsqueda de satisfacción total del usuario, se ha venido abriendo camino en el mundo del diseño, hasta llegarse a convertirse en el factor principal a considerar al momento de elaborar la estructura y funcionalidad de un sitio web.

Como usuarios, constantemente estamos siendo cuestionados en los sitios web sobre aspectos de nuestra vida. Basta con recurrir a facebook para ejemplificar este caso, si ingresamos a su sitio, podremos detectar rápidamente que en primer plano siempre existirá una caja de contenido haciéndonos alguna pregunta.

Dicha pregunta sirve para determinar qué es lo que nos gusta, rastrear a qué nos dedicamos y saber cuáles son nuestros intereses en general. Toda la información que proporcionemos a través de respuestas, será utilizada para definir un perfil y permitir que las compañías que ofrecen los servicios que te interesan, te proporcionen una mejor experiencia como usuario.

Una forma de lograr delimitar el mercado de usuarios que recibe un sitio, y por lo tanto poder crear un perfil aún más específico sin tantas preguntas, es la geo localización. La API de geolocation, la cual fue introducida por la W3C junto con el anuncio de HTML5, permite a tu sitio recibir información geográfica del usuario mediante JavaScript. En este artículo echaremos un vistazo a la API y explicaremos como poder utilizarla.

Funcionamiento

La información de geo localización, puede ser obtenida mediante varios medios. En los sitios web, tradicionalmente se determinaba la ubicación de un usuario, mediante el uso de la dirección IP, pero recientemente se ha popularizado el rastreo mediante dispositivos GPS instalados en los equipos móviles.

Este acceso a la localización, puede preocupar a los usuarios, ya que en la actualidad éstos se encuentran más informados sobre el uso que se le da a la información en ciertos portales. Es por esto que en la API de geolocation, se ha especificado que los agentes no deben enviar información del usuario, al menos de que este haya aceptado dicha comunicación.

Por ello se vuelve muy importante, que indiques en tu sitio el uso que le darás a la información que el usuario proporcione al aceptar el rastreo. Además, especifica cuáles serán las ventanjas que el usuario obtendrá al compartir sus datos.

Usos

Gracias al geolocation, podemos proporcionar información más específica y enfocada a ciertas zonas del mundo. Entre los principales usos que le podemos dar a esta aplicación, encontramos a la mercadotecnia por zona geográfica, las ofertas por región y la organización de eventos.

Con la mercadotecnia por zona geográfica y las ofertas por región, nuestros patrocinadores puede definir que tipos de productos aparecerán para el visitante de cierta ubicación. De esta manera, las compañías pueden lograr mejorar sus procesos de venta y distribución, además de que permite tener un mayor control sobre la manera en que ofrecemos los productos para ciertos usuarios.

De igual manera, esta aplicación nos permita encontrar gente de la misma zona de manera más sencilla, haciendo más fácil el proceso de organizar eventos por ciudad, provincia o estado.

Implementación

La implementación de esta aplicación en nuestro código constará de tres partes, la estructura con HTML, el estilo con CSS y la funcionalidad con JavaScript.

La estructura HTML estará compuesta por dos elementos principales, un recuadro donde mostraremos el mapa de ubicación y un enlace que servirá para disparar el evento de búsqueda de geolocation. Estos elementos estarán envueltos dentro de un div contenedor, lo que nos permitirá manejarlos como una unidad y de esa manera centrarlos en base a la ventana del navegador.

El código luciría de la siguiente manera:

<div class="contenedor">
    <div id="mapa">
        <span class="mensaje">Da click en el botón para indicarte tu ubicación</span>
    </div>
    <a class="ubicar" href="" title="">Encuentra mi ubicación</a>
    <div id="resultados">
        <span class="longitud"></span><br>
        <span class="latitud"></span><br>
    </div>
</div> 

Por su parte, el estilo variará según el sitio que manejemos, nosotros vamos a tratar de mantenerlo sencillo y simplemente agregaremos unas cuantas sentencias, principalmente a la zona donde se muestra el mapa.

.contenedor{
    width:800px;
    margin: 0 auto;
    position:relative;
}
#mapa{
    position:relative;
    text-align: center;
    width: 400px;
    height: 300px;
    margin:0 auto;
    margin-top:20px;
    padding: 5px;
    border: 1px solid black;
    background: #CCC;
}
#mapa .mensaje{
    display: block;
    font-weight: bold;
    font-size: 12px;
    color: rgb(54, 54, 54);
    width: 180px;
    line-height: 135%;
    margin: 0 auto;
    margin-top: 120px;
}
#mapa iframe{
    border:1px solid black;
}
.ubicar {
    display: block;
    text-align: center;
}

Y finalmente tenemos el código JavaScript, el cual se encargará de inicializar la API. Para este ejemplo haremos uso del framework jQuery, con el objetivo de simplificar el código, por lo que es necesario incluir la librería:

Lo primero que haremos, será definir las variables que utilizaremos para capturar los elemento que servirán para mostrar información en nuestra página.

var enlace = jQuery('.ubicar');
var longitud = jQuery('.longitud');
var latitud = jQuery('.latitud');
var mensaje = jQuery('.mensaje');

Después verificaremos que el navegador soporte el uso de geolocation.

if (navigator.geolocation) {
  //Si entra aquí, es que el navegador lo soporta
} else {
  alert('Lo sentimos, tu navegador no soporta geolocation');
}

Si el usuario logra pasar esta validación, entonces debemos capturar el evento clic que se realice sobre el enlace para encontrar la ubicación.

if (navigator.geolocation) {
  enlace.click(function(e) {
    e.preventDefault();
    mensaje.html("Cargando...");
    navigator.geolocation.getCurrentPosition(insertarUbicacion, errorUbicacion);
  });
} else {
  alert('Lo sentimos, tu navegador no soporta geolocation');
}

Con esto, cuando el usuario de clic sobre el enlace, el mensaje del recuadro cambiará a “Cargando…” y se calculará la ubicación desde donde esta accediendo. Para esta acción se hace una llamada a la función “getCurrentPosition” la cual recibe dos parámetros, el primero de ellos indica hacia donde se mandara la información una vez que se obtenga, y el segundo sirve para indicar el nombre de la función que se llamará en caso de una falla.

function insertarUbicacion(posicion) {
  // Obtenemos las propiedades de geolocation y las guardamos en las variables
  var glatitud = posicion.coords.latitude;
  var glongitud  = posicion.coords.longitude;

  // Insertar el mapa de google en un iframe
  jQuery('#mapa').html('<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/?ie=UTF8&amp;ll='+glatitud+','+glongitud+'&amp;spn=0.332359,0.617294&amp;t=m&amp;z=11&amp;output=embed"></iframe>');

  longitud.html('Longitud: '+glongitud);
  latitud.html('Latitud: '+glatitud);

  //Hacemos una llamada ajax a la API de Google Maps para obtener el mapa de la ubicación
  jQuery.ajax({
      url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+glatitud+','+glongitud+'&sensor=true',
      type: 'POST',
      dataType: 'json',
      error: function(xhr, textStatus, errorThrown) {
          errorUbicacion();
       }
   });
		
}

function errorUbicacion() {
   alert('No pudimos encontrar tu ubicación exacta');
}