Limitless

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.

Ver Demo

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:

http://jafrancov.com/2010/07/geolocalizacion-mediante-la-api-... on Twitpic

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>

Ver Demo

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

Enjoy this Life!!

About Author

Alex Franco

 Developer, Sysadmin, traveler, music lover, #TqV, SU2 at #4sq, and more…

19 Comments

  1. Nuevo bookmark: Geolocalización con HTML5 | Alex Franco http://bit.ly/c31BcE

    This comment was originally posted on Twitter

    • felipe lucas Reply

      hola como estas muy bacano el tutorial, pero una pregunta: quiero mostrar el lugar fijo de mi negocio, como hago? gracias?

      • @FelipeLucas en maps.google.com activa un Lab que se llama “Mostrar ubicación Lat/Lng” buscas tu negocio, click derecho y “mostrar lat/lng”, copias esa dirección y sigue este post. si quieres algo más light, ve este video que te ahorrará meterte más a fondo con la API si es que requieres algo sumamente sencillo.

  2. hola amigo, me gusto, estoy en esto pero es re poco lo que se.
    he leido e intento utilizar este poco de codigo.

    Puedes decirme como lo debo ubicar tengo el codigo en mi dreamweaver en el body.
    pero no me muestra el boton ni nada como en el demo.

    me ayudas, gracias.

    • @patricio No utilicé ni un solo PHP en el ejemplo, así tal cual está en el post es como se hace, mándame por la página de contacto tu código o pégalo aquí en un comment, ya con eso podré ayudarte

  3. kenneth Reply

    el ultimo script que pones para dibujar el mapa, en que parte del codigo se pondria?

  4. Marc Reply

    Hola,
    Poniendo lo que tu pones me geolocaliza, pero no me dibuja el mapa…sabes porque puede ser??

    O sea, poniendo el script dentro del head i la otra parte tambien dentro de un script en el body. Que hago mal??

    Muchas gracias

  5. patricio Reply

    gracias, ya esta todo solucionado hace tiempo. ;)

  6. Nicho Reply

    Saludos, bastante interesante está esto.
    Quisiera saber si hay manera de obtener en una variable el país y ciudad. Esto sería muy bueno aplicarlo en sitios donde se requiera filtrar datos según la región.

    • @Nicho si hay manera, próximamente publicaré cómo, he dejado un poco pasivo el blog, pero este mes parece excelente para ponerlo en pie nuevamente, ya lo estaré publicando

  7. Hola amigo estoy buscando un codigo que use la funcion de geolocalizacion pero que a su ver se permita desde el marcador que se genere, guardar los datos de ubicacion y tiempo en una base de datos de MySQL, me estoy basando en el ejemplo de la URL: https://developers.google.com/maps/articles/phpsqlinfo?hl=es pero no me esta funcionando y el API esta desactualizado, me puedes ayudar a darme una idea. Gracias,

    • @AmilkarPerez Los datos quieres que los guarde automáticamente o a partir de un formulario?

      • Gracias por tu respuesta, la idea es que se haga a través de un formulario Que se pueda conectar a través del marcador que aparezca al georeferenciarse para ingresar los datos de Georeferenciacion y cualquier otro dato a través del formulario. Mil gracias nuevamente.

      • Amilkar Perez

        Hola Alex, com estás, pudiste revisar la opcion de geolocalizar y que en el marcador aparezca un formulario para insercion de registros incluyendo los datos de georeferenciacion?. Gracias por tu ayuda.

Comenta