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!!
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
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.
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.
Hola Alex
He estado analizando tus publicaciones y me quedo admirado de la manera y sencilles para tratar los temas
ahora bien, tengo una base de datos con campos como ciudad, pais, direccion.
yo quisiera recorrer la tabla y actualizar los campos longitud y latitus así cuando alguien visite la pagina, le muestre la localización en el mapa
me puedes dar una pista de como obtener las coordenadas para cada dato de la tabla?
mi base de datos consta de 7349 registros. Imposible hacerlo manualmente.
gracias
Eso es Geocoding puedes ver como hacerlo acá http://jafrancov.com/2011/06/geocode-gmaps-api-v3/ pero, son demasiados registros, no podrás actualizarlos todos en una sola instrucción gratis, debes encontrar la manera de hacerlo paulatinamente a menos que pagues por el uso de la api.
Buenas Tardes Alex Franco, Necesito hacer exactamente lo mismo que hace el demo que muestras, trate de utilizar el codigo que muestras aqui pero no me funciona, serias tan amable de ayudarme en este caso
Desafortunadamente ya no funciona bajo dominios http, el error de consola indica lo siguiente:
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.