Un aspecto muy interesante dentro del desarrollo web es la geolocalización, es decir, saber desde donde está viendo el usuario tu sitio web a través del navegador. No sé si sois conscientes de las oportunidades que nos brinda esta tecnología. Por ejemplo, puedes basar la configuración regional de idioma basándote en la localización del usuario, o por ejemplo, puedes mostrar ciertos productos en tu tienda online según la procedencia del visitante de la web. Abierto el abanico de posibilidades que tenemos con la geolocalización, vamos a examinar cómo se puede utilizar la API de geolocalización para obtener los detalles de la ubicación del usuario.
Detectando las capacidades del navegador en cuanto a geolocalización
Comprobar las características del navegador es la mejor manera de confirmar si la API de Geolocalización está disponible.
if("geolocation" in navigator) {
//¿qué?
}
else {
alert("¡Lo sentimos mucho! Tu navegador no soporta esta característica");
}
La clave para la detección por Geolocalización en tu navegador es el objeto navigator.geolocation. Usar in en vez del simple if(navigator.geolocation) es importante porque se chequea si se ha inicializado la geolocalización y encima optimiza mejor los recursos del dispositivo.
Consulta para obtener información por geolocalización
El método navigator.geolocation.getCurrentPosition es la fuerza impulsora detrás de la recuperación de la información sobre la ubicación:
if("geolocation" in navigator) {
navigator.geolocation.getCurrentPosition(function(position) {
console.log(position);
});
}
Una vez que se llama a este método (que proporciona una función que se ejecuta si la solicitud ha sido satisfactoria), el navegador preguntará al usuario si le permite recuperar la información de su ubicación:
Cuando el usuario permita a la página web recuperar la información de su ubicación, el navegador va a buscar la información, proporcionándote un objeto de posición con una carga de información muy útil semejante a:
// Objeto "Position"
{
coords: { "Coordinates" object
accuracy: 65,
altitude: 294.4074401855469,
altitudeAccuracy: 10,
heading: -1,
latitude: 43.01256284360166,
longitude: -89.44531987692744,
speed: -1
},
timestamp: 1429722992094269
}
Si deseas más información como el país, la ciudad, y demás información, puedes utilizar un servicio de terceros, que hay muchos por la red como Leaflet o Geoext.
Esta API es la base de muchas aplicaciones móviles y realmente debe estar en la caja de herramientas de cualquier desarrollador web. Lo mejor de todo es que todos los navegadores soportan ahora la API de geolocalización.
Espero que este tutorial haya sido de tu agrado y sepas aplicar estas funciones en tus proyectos futuros, para que puedas localizar a tus usuarios. Como te hemos comentado antes, esta API tiene multitud de usos. Desde cambiar el idioma de la web en base al país del usuario, hasta ofrecer distinto contenido dependiendo de donde proceda el visitante. Ya sabes que puedes enviarnos tus tutoriales a través de la interfaz de usuarios que tienes a tu disposición en programacion.net y proponernos nuevos tutoriales utilizando el área de comentarios que hay más abajo.