La geolocalización es en pocas palabras asociar un recurso digital a una locación física ya sea mediante imágenes, vídeos, textos o meta-datos.
Con HTML5 podemos saber la localización de un usuario aunque en realidad es la de su ordenador. El punto que se muestra en el mapa no es exacto pero es una aproximación bastante cerca.
Puedes ver el ejemplo en la fuente.. y probablemente tu navegador te pida permisos para saber tu locación pero tranquilo acepta los permisos, nadie sabrá tus datos.
Lo primero que tenemos que hacer es crear es un parrafo con un identificador llamado demo que sera en donde aparezcan los mensajes de error. Después crearemos un div con la identificación mapholder.
<p id="demo"></p>
<div id="mapholder"></div>
Ahora enlacemos el mapa de google.
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
Ahora coloquemos el script que hace prácticamente todo el trabajo.
var x=document.getElementById("demo";
/* Función de la localización*/
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Tu navegador no soporta geolocalización.";}
}
/*Función de posición*/
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='260px';
mapholder.style.width='590px';
/*Opciones*/
var myOptions={
center:latlon,zoom:14, /*zoom en el mapa*/
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
};
var map=new google.maps.Map(document.getElementById("mapholder",myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"Aquí estas"});
}
/*Mensajes de errores*/
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:/*Solicitud denegada*/
x.innerHTML="El usuario negó la solicitud de Geolocalización"
break;
case error.POSITION_UNAVAILABLE:/*No disponible*/
x.innerHTML="La información de localización no esta disponible"
break;
case error.TIMEOUT:/*Tiempo agotado*/
x.innerHTML="El tiempo de espera se agotó."
break;
case error.UNKNOWN_ERROR:/*Error desconocido*/
x.innerHTML="A ocurrido un error desconocido."
break;
}
Por ultimo nos falta agregar un botón que llame al script.
<button onclick="getLocation()">¡Encontrarme!</button>
El usuario al hacer clic en el botón le mostrara un aproximado de su ubicación pero claro antes tendrá que dar permisos al navegador, y en caso de que lo deniegue o surja algún otro error se le mostrara en el párrafo con el identificador demo. Puedes darle estilos al botón pero eso esta de más.