En ocasiones necesitamos saber la ubicación de un usuario que visita una página web. Aquí te mostraremos como hacer una función mediante la API de geolocalización del W3C.
La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.
La función «navigator.geolocation.getCurrentPosition()» devuelve las siguientes variables:
- position.coords.latitude – latitud
- position.coords.longitude – longitud
- position.coords.altitude – altura
- position.coords.accuracy – exactitud estimada
Ejemplo para detectar y mostrar localización geográfica.
Con un editor de texto como bloc de notas, creamos un archivo llamado index.html e ingresamos el siguiente código:
<!DOCTYPE HTML>
<html>
<head>
<title> Geolocalización </title>
<!-- Script para mostrar las coordenadas-->
<script type="text/javascript">
if (navigator.geolocation) { //Validar si hay acceso web a la ubicación
navigator.geolocation.getCurrentPosition(mostrarUbicacion); //Obtiene la posición
} else {
alert("¡Error! Este navegador no soporta la Geolocalización.");
}
//Funcion para obtener latitud y longitud
function mostrarUbicacion(position) {
var latitud = position.coords.latitude; //Obtener latitud
var longitud = position.coords.longitude; //Obtener longitud
var div = document.getElementById("coordenadas");
div.innerHTML = "<br>Latitud: " + latitud + "<br>Longitud: " + longitud; //Imprime latitud y longitud
}
</script>
</head>
<body>
<!-- División o secciona para mostrar coordenadas -->
<div id='coordenadas'></div>
</body>
</html>
En el ejemplo anterior creamos una función para obtener las coordenadas y las mostramos en un div.
Abrimos el archivo index.html con un navegador y nos solicitara permiso para acceder a nuestra ubicación.
Al permitir el acceso a nuestra ubicación nos mostrara la latitud y longitud geográfica, expresada en grados (WGS84).
Abrimos Google Maps e introducimos la latitud y longitud en el cuadro de búsqueda y presionamos buscar. Nos mostrara nuestra ubicación en el mapa.
Detectar geolocalización y mostrar posición en Google maps directamente en nuestra web.
En este ejemplo vamos a detectar la latitud, longitud y mostrar la ubicación en Google Maps utilizando la API.
<!DOCTYPE HTML>
<html>
<head>
<title> Geolocalización </title>
<!-- Carga API de google maps -->
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var x=document.getElementById("errores");
navigator.geolocation.getCurrentPosition(mostrarPosicion,showError); //Obtiene la posición
function mostrarPosicion(position)
{
lat=position.coords.latitude; //Obtener latitud
lon=position.coords.longitude; //Obtener longitud
latlon=new google.maps.LatLng(lat, lon); //Crear objeto que representa un punto geográfico
divmapa=document.getElementById('mapa');
divmapa.style.height='600px'; //Alto
divmapa.style.width='800px'; //Ancho
<!-- Opciones para el mapa-->
var myOptions={
center:latlon,zoom:10, //Zoom
mapTypeId:google.maps.MapTypeId.ROADMAP, //Tipo de mapa
mapTypeControl:false, //Deshabilita el control de tipo de mapa
navigationControlOptions:{ style:google.maps.NavigationControlStyle.SMALL } //Aspecto pequeño
};
var map=new google.maps.Map(document.getElementById("mapa"),myOptions); //Funcion que crea un mapa en la div .
var marker=new google.maps.Marker({position:latlon,map:map,title:"Estás aquí!"}); //Constructor para crear marcador de la posición
}
<!-- Funcion para mostrar errores -->
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Denegada la peticion de Geolocalización en el navegador."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="La información de la localización no esta disponible."
break;
case error.TIMEOUT:
x.innerHTML="El tiempo de petición ha expirado."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="Ha ocurrido un error desconocido."
break;
}
}
</script>
</head>
<body>
<!-- División o secciona para mostrar errores -->
<div id="errores"></div>
<!-- División o secciona para mostrar mapa -->
<div id="mapa"></div>
</body>
</html>
En este ejemplo utilizamos la API de Google maps solo para mostrar la ubicación en el mapa sin embargo la localización es obtenida mediante la API de Geolocalización del W3C.
Nota: A partir de Chrome 50, la API de geolocalización sólo funcionará en contextos seguros, como HTTPS. Si su sitio está alojado en un origen no seguro (como HTTP) las solicitudes para obtener la función de la ubicación de los usuarios ya no.