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>