Geolocalización con HTML5

HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web. Pero el tema central de este post no es HTML5, sin embargo es la base de esto.

La Geolocalización es una de las características principales de HTML5, la cual empieza a tener un gran empuje en todos los ámbitos de la web, redes sociales y más.

Ya entramos un poco en la parte de la geolocalización con la API de Firefox, ahora veremos con solamente un poco de código cómo podremos obtener la ubicación de un usuario con HTML5, que en realidad estaremos usando la API de Geolocalización de la W3C (Consorcio World Wide Web), que es el organismo internacional que dicta lo estándares Web. Podremos observar que obtener la información de esta manera es aún más rápida.

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    var options = { position: new google.maps.LatLng(lat, lng) }
    var marker = new google.maps.Marker(options);
    marker.setMap(map);
  });
}

Con el objeto navigator.geolocation es con el que detectamos si el navegador tiene las capacidades necesarias para detectar la Geolocalización.

El método navigator.geolocation.getCurrentPosition es el que hace la labor de recuperación de la ubicación del usuario mediante el objeto position que se envía a la función. Una vez que se ha llamado a este método, por medio de una función que permita su ejecución, el navegador nos preguntará si le permitimos usar la información de nuestra ubicación, lo hará de esta manera:

Las instrucciones position.coords.latitude y position.coords.longitude extraen la información de latitud y longitud correspondiente de la posición obtenida.

Las últimas 3 líneas del código son las que dibujan el mapa y nos colocan el pin en as coordenadas obtenidas, si quieres dibujar el mapa con estas instrucciones no olvides agregar el siguiente script dentro de las etiquetas head:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>

Ahora si a disfrutar de la Geolocalización con HTML5.

Enjoy this Life!!