GeoLocalización HTML5 ( Geolocalizador )

En este tutorial de hoy vamos a ver como funciona el localizador de HTML5, de momento solo es soportado por Chrome y Firefox ( sus nuevasversiones ). Este nuevo sistema de localizar unido a las API de Google Maps asusta la precisión que tiene. Pienso que dentro de poco lasredes sociales como Facebook utilizaran esta tecnología para controlarnos todavía más. Aquí debajo pongo el codigo HTML y javaScript necesario para el funcionamiento de una manera muy básica, también pongo el ejemplo para que lo podáis probar y comentar los resultados.

Lo primero será crear la función para que el navegador obtenga las coordenadas:

<script language="javascript">
function obtener_localizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Tu navegador no soporta la API de geolocalizacion');
}
}

La siguiente función javaScript llamada 'coordenadas' que utiliza la API Google Maps para que muestre los resultados obtenidos en la función anterior encima del mapa:

function coordenadas(position) {
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
var mapa = document.getElementById("mapa");
mapa.src = "http://maps.google.com/maps/api/staticmap?center=" + latitud + "," + longitud + "&zoom=15&size=400x400&markers=color:green|label:A|" + latitud + "," + longitud + "&sensor=false";
}

</script>

Ahora simplemente lo que necessitamos será un boton para activar la función javaScript y una imagen llamada 'mapa' donde llamaremos al mapa de Google, através de 'mapa.src' de la función anterior:

 <a href="javascript:obtener_localizacion();">Mostrar Posición</a></BR>
</p>
<p><img id="mapa" src=""></p>

Haga click en el siguiente botón para ver el ejemplo en vivo:

(Comentar los resultados)

No olvide escribir su comentario!!!