Geolocalización por Javascript sobre Google Maps

Geolocalización por Javascript sobre Google Maps

Etiquetas: getCurrentPosition navigator.geolocation

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:

Ejemplo en Movimiento

El código comentado:


  1. var center
  2. var map = null;
  3.  
  4. /***********************************************
  5.     Control del redimensionamiento de la ventana
  6. ***********************************************/
  7.  
  8. window.onresize = function(){
  9.     document.getElementById("contenedor_mapa").style.height = (window.innerHeight) + "px";
  10. }
  11.  
  12. /***********************************************
  13.     Función de inicio.
  14.     Creo el mapa, y lo centro en las coordenadas de España
  15. ***********************************************/
  16.  
  17. function init(){
  18.     var mapdivMap = document.getElementById("contenedor_mapa");
  19.     mapdivMap.style.width = '100%';
  20.     mapdivMap.style.height = (window.innerHeight) + "px";
  21.  
  22.     center = new google.maps.LatLng(40.27952566881291, -4.2626953125);
  23.     var myOptions = {
  24.         zoom: 5,
  25.         center: center,
  26.         mapTypeId: google.maps.MapTypeId.ROADMAP
  27.     }
  28.     map = new google.maps.Map(document.getElementById("contenedor_mapa"), myOptions);
  29.     geoposicionar();
  30. }
  31.  
  32. /***********************************************
  33.     En esta función se hace la solicitud de geolocalización y el primer
  34.     control para ver si el navegador soporta el servicio
  35. ***********************************************/
  36.  
  37. function geoposicionar(){
  38.     if(navigator.geolocation){
  39.         mostrarMensaje("obteniendo posición...");
  40.         navigator.geolocation.getCurrentPosition(centrarMapa,errorPosicionar);
  41.     }else{
  42.         mostrarMensaje('Tu navegador no soporta geolocalización');
  43.     }   
  44. }
  45.  
  46. /***********************************************
  47.     Control de errores en caso de que la llamada
  48.     navigator.geolocation.getCurrentPosition(centrarMapa,errorPosicionar);
  49.     termine generando un error
  50. ***********************************************/
  51.  
  52. function errorPosicionar(error) {
  53.     switch(error.code)  
  54.     {  
  55.         case error.TIMEOUT:  
  56.             mostrarMensaje('Request timeout');  
  57.         break;  
  58.         case error.POSITION_UNAVAILABLE:  
  59.             mostrarMensaje('Tu posición no está disponible');  
  60.         break;  
  61.         case error.PERMISSION_DENIED:  
  62.             mostrarMensaje('Tu navegador ha bloqueado la solicitud de geolocalización');  
  63.         break;  
  64.         case error.UNKNOWN_ERROR:  
  65.             mostrarMensaje('Error desconocido');  
  66.         break;  
  67.     }  
  68. }
  69.  
  70. /***********************************************
  71.     Esta función se ejecuta si la llamada a  navigator.geolocation.getCurrentPosition
  72.     tiene éxito. La latitud y la longitud vienen dentro del objeto coords. 
  73. ***********************************************/
  74.  
  75. function centrarMapa(pos, z){
  76.     map.setZoom(16);
  77.     map.setCenter(new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude));
  78.     var marker = new google.maps.Marker({
  79.         position: new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude),
  80.         map: map,
  81.         title:"Tu posición"
  82.       });
  83.     ocultarMensaje();
  84. }
  85.  
  86. /***********************************************
  87.     Gestión de mensajes
  88. ***********************************************/
  89.  
  90. function mostrarMensaje(str){
  91.     $('#texto').html(str);
  92.     $('#capa_mensajes').css({"visibility":"visible"});
  93. }
  94.  
  95. function ocultarMensaje(){
  96.    $('#capa_mensajes').css({"visibility":"hidden"}); 
  97. }
  98.  
Comentarios

    No hay comentarios

Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: