Obtener la posición de un usuario en Java Script

Geolocalización: Obtener la posición de un usuario en Java Script

Una de las principales características de HTML5 es la API de geolocalización, ya que nos permite conocer la ubicación geográfica del usuario siempre que el navegador lo soporte.

En este tutorial vamos a realizar una función sencilla que obtenga y muestre la posición de un usuario en Java Script, esto nos sería de gran ayuda para aprender su funcionamiento.

Cómo obtener la posición de un usuario en Java Script

Con el siguiente código HTML y Java Script vamos obtener las coordenadas y mostrarlas en la página.

<html>
  <head>
    <title>Obtener la posición de un usuario en Java Script</title>
  </head>
  <body onload="getLocation()">
    <div id="demo"></div>
    <script>
      // Esta función es la encargada de obtener las coordenadas y mostrarlas
      // en la página
      function getLocation() {
      	if (navigator.geolocation) {
      		navigator.geolocation.getCurrentPosition(showPosition,
                 function(error) {
      			var x = document.getElementById("demo");
                     x.innerHTML = "Error "+error;
                 },
                 {timeout: 30000, enableHighAccuracy: true, maximumAge: 75000});
      	} else {
      		var x = document.getElementById("demo");
      		x.innerHTML = "Geolocation is not supported by this browser.";
      	}
      }
      
      // Función que recibe una posicion y la muestra en la página
      function showPosition(position) {
      	var x = document.getElementById("demo");
      	x.innerHTML = "Latitude: " + position.coords.latitude + 
      	"<br>Longitude: " + position.coords.longitude; 
      }
    </script>
  </body>
</html>

Es importante ver que la función getLocation es ejecutada una vez que se carga completamente la página, esto se indica con el atributo onload de la etiqueta body.

Bueno gente, espero que les sea de gran utilidad este pequeño tutorial y ante cualquier inconveniente no duden en dejar un comentario.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

2 comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *