Geolocalización por Javascript sobre Google Maps
La API de geolocalización de Javascript permite obtener la geoposición del usuario. Este ejemplo muestra como obtener la posición (latitud y longitud) del usuario y posicionarla sobre un mapa de GoogleMaps.
Algunas cosas a tener en cuenta a la hora de utilizar esta API son:
- La geolocalización es compatible con la mayoría de navegadores modernos, tanto de mobile como de escritorio. Los casos mas «problemáticos» de incompatibilidad pueden ser IE8 e inferiores, y Opera Mini
- La precisión de este método depende del navegador/dispositivo. Por ejemplo Chrome utiliza los Google Location Services e Internet Explorer los Microsoft Locacion Service, por lo que los resultados pueden variar en un mismo dispositivo de un navegador a otro.
- Cuando se llama al método getCurrentPosition el navegador mostrará una ventana al usuario solicitando permiso para obtener su posición.
Algunos enlaces de interes:
- Especificación W3C de la API de geolocalización
- Artículo de Mozilla
- Precisión y funcionamiento de la API de geolocalización
- Compatibilidad con navegadores
El código comentado:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
var center var map = null; /*********************************************** Control del redimensionamiento de la ventana ***********************************************/ window.onresize = function(){ document.getElementById("contenedor_mapa").style.height = (window.innerHeight) + "px"; } /*********************************************** Función de inicio. Creo el mapa, y lo centro en las coordenadas de España ***********************************************/ function init(){ var mapdivMap = document.getElementById("contenedor_mapa"); mapdivMap.style.width = '100%'; mapdivMap.style.height = (window.innerHeight) + "px"; center = new google.maps.LatLng(40.27952566881291, -4.2626953125); var myOptions = { zoom: 5, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("contenedor_mapa"), myOptions); geoposicionar(); } /*********************************************** En esta función se hace la solicitud de geolocalización y el primer control para ver si el navegador soporta el servicio ***********************************************/ function geoposicionar(){ if(navigator.geolocation){ mostrarMensaje("obteniendo posición..."); navigator.geolocation.getCurrentPosition(centrarMapa,errorPosicionar); }else{ mostrarMensaje('Tu navegador no soporta geolocalización'); } } /*********************************************** Control de errores en caso de que la llamada navigator.geolocation.getCurrentPosition(centrarMapa,errorPosicionar); termine generando un error ***********************************************/ function errorPosicionar(error) { switch(error.code) { case error.TIMEOUT: mostrarMensaje('Request timeout'); break; case error.POSITION_UNAVAILABLE: mostrarMensaje('Tu posición no está disponible'); break; case error.PERMISSION_DENIED: mostrarMensaje('Tu navegador ha bloqueado la solicitud de geolocalización'); break; case error.UNKNOWN_ERROR: mostrarMensaje('Error desconocido'); break; } } /*********************************************** Esta función se ejecuta si la llamada a navigator.geolocation.getCurrentPosition tiene éxito. La latitud y la longitud vienen dentro del objeto coords. ***********************************************/ function centrarMapa(pos, z){ map.setZoom(16); map.setCenter(new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude)); var marker = new google.maps.Marker({ position: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude), map: map, title:"Tu posición" }); ocultarMensaje(); } /*********************************************** Gestión de mensajes ***********************************************/ function mostrarMensaje(str){ $('#texto').html(str); $('#capa_mensajes').css({"visibility":"visible"}); } function ocultarMensaje(){ $('#capa_mensajes').css({"visibility":"hidden"}); } |