Este tutorial muestra cómo usar la API de geolocalización combinada con la API de Google Maps para mostrar nuestra posición actual sobre un mapa con HTML5.
Nivel: Medio
¿Qué es la geolocalización?
Sin entrar en si forma parte o no de HTML5, podemos definir la geolocalización como una nueva API Javascript que nos permite conocer de forma fácil nuestras coordenadas desde un navegador.
Conociendo nuestra posición
Esta API destaca por lo fácil que es usarla. Por ejemplo:
Código :
<script>
function localizame() {
navigator.geolocation.getCurrentPosition(coordenadas);
}
function coordenadas(){
var latitud = position.coords.latitude;
var longitud = position.coords.longitude;
}
</script>Con este código tan simple tenemos almacenados en las variables latitud y longitud la latitud y longitud de nuestra posición
Controlando errores
Es posible que obtengamos algún tipo de error a la hora de usar esta API. El más común para los usuarios desactualizados (vamos, los que usen IE) es que el navegador no soporte geolocalización. En ese caso controlaremos:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
</script>
Existen además otros errores relacionados con los permisos sobre privacidad del usuario, tiempo de espera, etc. Para ello crearemos una función sencilla que muestre un mensaje según el código de error, y la llamamos en la función getCurrentPosition:
Código :
<script>
function localizame() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function errores(err) {
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
</script>
Combinando la API de geolocalización con la API de Google Maps
Veamos los pasos directamente sobre los comentarios del código:
Código :
<!DOCTYPE html>
<html>
<head>
<title>Localizador</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> /*Usamos JQuery*/
<style>
body{
font-family: "Helvetica Neue", "Helvetica", Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>Localizador mediante HTML5</h1>
</header>
<section>
<article>
<div id='map_canvas' style='width:100%; height:400px;'></div>/*Esta capa hará de elemento contenedor del mapa*/
</article>
</section>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> /*Cargamos la API de Google Maps*/
<script type="text/javascript">
var map;
var latitud;
var longitud;
$(document).ready(function() {
localizame(); /*Cuando cargue la página, cargamos nuestra posición*/
});
function localizame() {
if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
navigator.geolocation.getCurrentPosition(coordenadas, errores);
}else{
alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
}
}
function coordenadas(position) {
latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
cargarMapa();
}
function errores(err) {
/*Controlamos los posibles errores */
if (err.code == 0) {
alert("Oops! Algo ha salido mal");
}
if (err.code == 1) {
alert("Oops! No has aceptado compartir tu posición");
}
if (err.code == 2) {
alert("Oops! No se puede obtener la posición actual");
}
if (err.code == 3) {
alert("Oops! Hemos superado el tiempo de espera");
}
}
function cargarMapa() {
var latlon = new google.maps.LatLng(latitud,longitud); /* Creamos un punto con nuestras coordenadas */
var myOptions = {
zoom: 17,
center: latlon, /* Definimos la posicion del mapa con el punto */
mapTypeId: google.maps.MapTypeId.ROADMAP
};/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
map = new google.maps.Map($("#map_canvas").get(0), myOptions); /*Creamos el mapa y lo situamos en su capa */
var coorMarcador = new google.maps.LatLng(latitud,longitud); /Un nuevo punto con nuestras coordenadas para el marcador (flecha) */
var marcador = new google.maps.Marker({
/*Creamos un marcador*/
position: coorMarcador, /*Lo situamos en nuestro punto */
map: map, /* Lo vinculamos a nuestro mapa */
title: "Dónde estoy?"
});
}
</script>
</body>
</html>
Pincha aquí para ver el ejemplo completo.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Habría que añadir:
Por HtrMancera el 02 de Abril de 2012
Por Mirian Pineda el 02 de Abril de 2012
Mirian Pineda :
La precisión depende del propio dispositivo y del método de geolocalización elegido por el navegador. De todas maneras podemos conocer la "puntería" en metros de nuestra consulta mediante coords.accuracy.
He actualizado el ejemplo haciendo un alert que expresa la precisión expresado en Km y metros
Por Mirian Pineda el 02 de Abril de 2012
Pero quisiera saber si conoces alguna forma de combinar la API de Google maps y Gelocation para trazar la ruta desde la posición del usuario hasta una ubicación específica. Yo lo he intentado, pero no he podido lograr nada en concreto
Te recomiendo leer esta documentacion sobre DirectionService.
Saludos.
Por jarlest el 03 de Abril de 2012
Por Sergio el 05 de Abril de 2012
Saludos
Por gio.vl el 05 de Abril de 2012
Por blender__ el 06 de Abril de 2012
Por Sergio el 06 de Abril de 2012
Por jordano_p el 06 de Abril de 2012
Sobre los fallos de exactitud
Muchos habéis comentado sobre la inexactitud de la geolocalización, así que creo que será interesante explicar a que se debe.
La API de geolocalización no es más que una interfaz que nos entrega los datos de localización que nuestro dispositivo nos puede ofrecer. Esta es la clave: los que el dispositivo ofrece.
Si tu dispositivo es un pc sobremesa, casi seguro que la localización la realizará en base a la geolocalización IP, el más básico de los métodos, que puede incluso dar resultados a cientos de Km. Sin embargo si tenemos un smartphone, las coordenadas podrán responder a una triangulación en base a las redes móviles cercanas. En el mejor de los casos (wow, tengo un iPhone o cualquier otro smartphone Android de gama media / alta) el dispositivo dispondrá de GPS con lo cual la localización será casi perfecta (menos de 20m de exactitud).
Por otro lado el navegador es quien decide qué sistema de localización usar en base a su propia tabla de prioridades.
En resumen:
- Si quiero hacer una aplicación HTML5 para dispositivos móviles que me localize los restaurantes cercanos, la geolocalización es genial.
- Si quiero hacer una página que me corrobore que estoy delante del pc de mi casa, la geolocalización es una mierda.
Espero que eso responda las dudas existentes.
Por jordano_p el 07 de Abril de 2012
antonionavajas :
Sobre los fallos de exactitud
Muchos habéis comentado sobre la inexactitud de la geolocalización, así que creo que será interesante explicar a que se debe.
La API de geolocalización no es más que una interfaz que nos entrega los datos de localización que nuestro dispositivo nos puede ofrecer. Esta es la clave: los que el dispositivo ofrece.
Si tu dispositivo es un pc sobremesa, casi seguro que la localización la realizará en base a la geolocalización IP, el más básico de los métodos, que puede incluso dar resultados a cientos de Km. Sin embargo si tenemos un smartphone, las coordenadas podrán responder a una triangulación en base a las redes móviles cercanas. En el mejor de los casos (wow, tengo un iPhone o cualquier otro smartphone Android de gama media / alta) el dispositivo dispondrá de GPS con lo cual la localización será casi perfecta (menos de 20m de exactitud).
Por otro lado el navegador es quien decide qué sistema de localización usar en base a su propia tabla de prioridades.
En resumen:
- Si quiero hacer una aplicación HTML5 para dispositivos móviles que me localize los restaurantes cercanos, la geolocalización es genial.
- Si quiero hacer una página que me corrobore que estoy delante del pc de mi casa, la geolocalización es una mierda.
Espero que eso responda las dudas existentes.
Excelente aclaración !!!
Además esta tecnología es mucho más utilizada para aplicaciones móviles, con lo cual no tendrá estos problemas.
Por gio.vl el 10 de Abril de 2012
Por ema el 30 de Abril de 2012
Por godie el 13 de Julio de 2012
Por @isturiz_josue el 26 de Octubre de 2012
llevo diass buscando esto sin poder lograrlo, porq la mayoria te enseñan a geolocalizar y agregar marcadores mas no las 2 cosas en un mismo map.
Gracias
Por xdiegob el 08 de Noviembre de 2012
Por fer el 26 de Noviembre de 2012
esta pagina me fallo casi nada (15 m) de mi kasa con laptop con wifi y opera 12.00
Por Yfenche el 12 de Marzo de 2013
Todos los ordenadores no tiran bien.
En algunos tirando con opera 12.14 da el error Oops! No se puede obtener la posición actual. Perfecto cargo un mapa y hago que ponga el usuario la posicion marcando en un google map.
Pero el problema real viene con firefox 19.0.2 ya que no me lanza ningun error y no carga ni el mapa ni la ubicacion.
Alguien sabe por que pasa esto?
Muchas gracias
Por Claudio el 21 de Marzo de 2013
Por edinson el 23 de Marzo de 2013
Por Francisco el 28 de Marzo de 2013
Por Francisco el 28 de Marzo de 2013
Por Bocagran el 04 de Abril de 2013
Hay que cerrar el comentario anterior a map = new google.maps.Map($("#map_canvas").get(0), myOptions); añadiendo */ al final.
Hay que abrir correctamente el comentario "Un nuevo punto con nuestras coordenadas para el marcador (flecha)" con /* al principio. Falta el asterisco.
Creo que con esto está todo.
Un saludo.
Por ceclia el 08 de Abril de 2013
Por constanza el 31 de Mayo de 2013
Por chris el 24 de Octubre de 2013
Por León el 24 de Febrero de 2014
tienen que cambiar esta línea.
/*Configuramos una serie de opciones como el zoom del mapa y el tipo.
map = new google.maps.Map($("#map_canvas").get(0), myOptions); Creamos el mapa y lo situamos en su capa */
por esta.
//Configuramos una serie de opciones como el zoom del mapa y el tipo.
map = new google.maps.Map($("#map_canvas").get(0), myOptions); //Creamos el mapa y lo situamos en su capa//
Gracias por el artículo, muy interesante.
Por pedro el 31 de Marzo de 2014
Por javier el 07 de Abril de 2014
Por DanielPro el 23 de Mayo de 2014
Simplemente abran el ejemplo http://www.antonionavajas.com/ejemplos/geolocalizacion/localizador.html le dan a las teclas Ctrl + U copian el codigo.
Importante tener Jquery 1.7.1 en su maquina o en su defecto sustituir la linea:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
por esta
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
en caso de no querer instalar el jquery en su maquina.
Por FelipeeeRod el 31 de Julio de 2014
como puedo solucionaar eso...
Alguna idea
Por Felipe Rodriguez el 04 de Agosto de 2014
Por que cuando Quiero imprimirlas me manda error o me escribe NaN...
Alguien que me puede ayudar con eso
Por marbella el 04 de Septiembre de 2014
Por marbella ramirez el 04 de Septiembre de 2014
Por jonathan el 17 de Septiembre de 2015
Por OmarHdez el 20 de Octubre de 2015
En el script del HEAD puse:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
Y corregi la función cargarMapa:
function cargarMapa() {
var latlon = new google.maps.LatLng(latitud,longitud);
var myOptions = {
zoom: 18,
center: latlon,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var coorMarcador = new google.maps.LatLng(latitud,longitud);
var marcador = new google.maps.Marker({
position: coorMarcador,
map: map,
title: "Dónde estoy?"
});
}
Suerte a todos