0

Tengo un código en Javascript que hace 2 cosas para obtener la ubicación. Obtengo las coordenadas en un input al momento que el usuario acepta el acceso a su ubicación y la otra forma es arrastrando el marcador para obtener las coordenadas del lugar donde se soltó el marcador.

El código funciona perfectamente en Chrome y Explored pero no con Firefox. Con Firefox no carga el mapa pero si me da las coordenadas.

¿Alguien sabe a qué se debe? Gracias por la ayuda.

<html>
  <head>
    <meta charset="utf-8">
    <title>Obtener coordenadas de un marcador </title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #mapa_ubicacion {
        width: 100%;
        height: 80%;
      }
      #coords{width: 500px;}
    </style>
  </head>
  <body >
    <div id="mapa_ubicacion"></div>

    <input type="text" id="coords" style="width:20em;" value="" />
<script>
    window.onload=function(){

            // Funcion para Obtener latitud y longitud
            function localizacion(posicion){
                var latitude = posicion.coords.latitude;
                var longitude = posicion.coords.longitude;
                                document.getElementById("coords").value = latitude+","+longitude;
            }

            // Funcion para mostrar error en caso de no obtener informacion
            function error(){
                output.innerHTML = "<p>No se pudo obtener tu ubicación</p>";
            }
            // getCurrentPosition metodo que procesa Posicion, aunque puede recibir 3 atributos, posicion errores y confifuracion. Solo posicion es indispensable para que funcione.
            navigator.geolocation.getCurrentPosition(localizacion,error);
        }
//ESTAS DOS VARIABLES SON GLOBALES
var marker;          //variable del marcador
var coords = {};    //coordenadas o atributos obtenidas con la geolocalización

//Funcion principal
function initMap(){

    //usamos la API para geolocalizar el usuario
        navigator.geolocation.getCurrentPosition(
          function (position){
            coords =  {
              lng: position.coords.longitude,
              lat: position.coords.latitude
            };
            setMapa(coords);  //pasamos las coordenadas al metodo para crear el mapa
          },function(error){console.log(error);});
}

//NO SE VA CARGAR EL MAPA SI NO SE ACEPTA EL AXCESO A LA UBICACION
function setMapa (coords){   
      //Se crea una nueva instancia del objeto mapa
      var map = new google.maps.Map(document.getElementById('mapa_ubicacion'),
      {
        zoom: 13,
        center:new google.maps.LatLng(coords.lat,coords.lng),

      });

      //Creamos el marcador en el mapa con sus propiedades
      //para nuestro obetivo tenemos que poner el atributo draggable en true
      //position pondremos las mismas coordenas que obtuvimos en la geolocalización
      marker = new google.maps.Marker({ //este es el metodoto para crear un marcador, a continuacion sus atributos
        map: map, //donde se ubicara
        draggable: true,  //para poder arrastrar el marcador
        animation: google.maps.Animation.DROP, //efecto como de rebote al soltar el marcador
        position: new google.maps.LatLng(coords.lat,coords.lng),  //la nueva ubicacion, las cordenadas se almacenaran de nuevo en las variables pasadas

      });
      //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica 
      //cuando el usuario a soltado el marcador
      marker.addListener('click', toggleBounce);

      //Cuando el usuario termine de arrastrar el marcador se ejecuta la funcion anonima
      marker.addListener( 'dragend', function (){
        //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
        //coords es un input y su valor ahora sera latitud y longuitud
        //this se refiere al marker es un metodo para referisrse a si mismo
        document.getElementById("coords").value = this.getPosition().lat()+","+ this.getPosition().lng();
      });

}

//FUNCION DE REBOTE callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
function toggleBounce() {
  if (marker.getAnimation() !== null) {
    marker.setAnimation(null);
  } else {
    marker.setAnimation(google.maps.Animation.BOUNCE);
  }
}
// Carga de la libreria de google maps 

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
  </body>
</html>
3
  • La documentación dice que para utilizar geolocation, necesitas HTTPS.
    – fredyfx
    Commented el 7 feb. 2018 a las 22:40
  • ¿Te muestra algún error en la consola?
    – Rubén
    Commented el 7 feb. 2018 a las 22:45
  • En la consola me muestra solo una advertencia que dice que me falta una clave para usar la api de google maps, pero ya lo probe con y sin clave pero eso no afecta. Commented el 7 feb. 2018 a las 22:54

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.