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!!
Quizá también te interese...
14 Responses to “Geolocalización con HTML5”
Trackbacks/Pingbacks
- Geolocalización con HTML5 | Escuela Arte Granada - [...] el enlace a una demo oficial en la que podeis ver el código pulsando en view source. Y en ...
Nuevo bookmark: Geolocalización con HTML5 | Alex Franco http://bit.ly/c31BcE
This comment was originally posted on Twitter
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.
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
el ultimo script que pones para dibujar el mapa, en que parte del codigo se pondria?
@kenneth se pone entre las etiquetas “head” del HTML
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
@Marc necesitaría ver el código, puedes pegarlo aquí o usar el formulario de contacto, ya ahí lo vemos si gustas, saludos…
gracias, ya esta todo solucionado hace tiempo.
Hola oye como lograste que te dibujara el mapa.
@Gina puede checar este post para más info http://jafrancov.com/2010/08/bases-gmaps-api-v3/ ahí te explico cómo empezar con la API de Google Maps
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