jueves, 2 de diciembre de 2010

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!!!

18 comentarios:

  1. el navegador no me permite ...stoy con el mozilla 12 y el chrome ... y nada

    ResponderEliminar
  2. Fíjate si te sale la barra amarilla para dar permisos de geolocalización al navegador. A mi me funciona perfectamente en Chrome.

    Gracias!

    ResponderEliminar
    Respuestas
    1. me sale esa barra como tu la mencionas y aun asi no me corre el programa, lo probé en varias pc de escritorio con acceso a internet y no corre; mas bien, compilo en una laptop(probe en varias) y si funciona..... crees que tenga que ver si es de escritorio una pc para que no pueda correr????? por que en laptops si funciona...... gracias de antemano por la respuesta.....

      Eliminar
    2. Mmm... nose porque puede ser, yo una vez acepto la barra amarilla sea laptop o no, me funciona. Abrá que buscar más sobre el tema. Muchas gracias

      Eliminar
  3. para que ha si funciona pero como puedo utilizarlo para saber la ubicacion de otras personas?

    ResponderEliminar
    Respuestas
    1. Buenas tardes,
      no en principio no se puede. Ano ser que hicieras algún tipo de web para que cuando entren te grabes una imagen del mapa o las coordenadas a un SQL. Aunque deberías poner un aviso para los usuarios.

      Gracias por comentar!

      Eliminar
  4. Funciona muy bien, pero me sale que estoy en el centro de São Paulo y en realidad estoy en el sur de la ciudad... a que se debe esa diferencia... Seria por estar con una conexión 3G ??? Pero igual es fantástico, gracias. *u*

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario, debe ser por el 3G ya que te mostrará a la antena a la cual estas conectado.

      Gracias ;)

      Eliminar
  5. Respuestas
    1. Muchas gracias!
      Recordar compartir el Post puede que haya gente que lo este buscando... ;)

      Eliminar
  6. Muy bueno hay manera de hacer que el mapa se navegable?

    ResponderEliminar
    Respuestas
    1. Abria que buscar una api de Google para ir enviandole todaslas coordenadas. En cuanto al código de hay arriba abría que modificarlo un poco cambiando el link por la Api y haciendolo funcionar dentro de un bucle. Muchas gracias!

      Eliminar
  7. Hola, buenas soy nuevo en esto. y estoy intentado usar tu codigo para introducirlo en un pagina web para mi proyecto de carrera.
    No entiendo que quieres decir con esto:
    ""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:""

    he colocado el codigo que has dejado en mi correspondiente archivo de java y las ultimas lineas en el correspondiente de html.
    Y en mi pagina web , consigo que me aparezca el link " Mostrar posicion", pero al pinchar sobre él no ocurre nada.
    ¿que codigo falta para que funcione y en que archivo debo introducirlo ??
    Muchas gracias.
    Un post genial :)

    ResponderEliminar
    Respuestas
    1. Al darle a mostrar posición (al menos en chrome) aparece una barra arriba en la que hay que aceptar ser localizado, despues de clickarle en mi caso me aparece el mapa.

      ¿El ejemplo te funciona?

      Muchas gracias! el +1 ayuda! :D

      Eliminar
  8. yeahhh glorioso el resultado me dio la posición exacta donde estoy. Contame como ves la solucion del server ? o eso te da google y en caso de hacer un uso comercial te cobran ?

    ResponderEliminar
  9. Felicidades por el post. Yo hice uno parecido pero utlizando simple html dom para mostrar los resultados de google maps -> http://www.webcamp.es/geolocalizador-con-php-ajax-y-google-maps/

    ResponderEliminar