Mostrar ubicación actual maps tras pulsar botón

publicado por: Anonymous

llevo unos días trabajando con la API de maps y estoy teniendo problemas.

La cosa es que quiero que al abrir la página se muestre el mapa con un marcador en una posición determinada. Y que posteriormente, si quieres saber tu ubicación, pulses un botón y que se añada un marcador en el mapa en ella.

La primera parte lo consigo, pero lo que no consigo es mostrar mi ubicación pulsando el botón. Yo imagino que no capturo bien el click, o tengo su función mal posicionada en mi código.

¿Podeis ayudarme? ¡Gracias!

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
  function localizacion(posicion) {_x000D_
_x000D_
    var latitudReal = null;_x000D_
    var longitudReal = null;_x000D_
_x000D_
    $('#UbicacionPersonal').click(function() {_x000D_
      latitudReal = posicion.coords.latitude;_x000D_
      longitudReal = posicion.coords.longitude;_x000D_
    });_x000D_
_x000D_
    var latitud = 39.579745;_x000D_
    var longitud = 2.654018;_x000D_
_x000D_
    //Generamos el mapa que muestre y cual será el punto central_x000D_
    var map = new google.maps.Map(document.getElementById('Mapa'), {_x000D_
      center: {_x000D_
        lat: latitud,_x000D_
        lng: longitud_x000D_
      },_x000D_
      zoom: 14_x000D_
    });_x000D_
_x000D_
    //Generamos el marcadores para señalar una posición_x000D_
    var markerMiPosicion = new google.maps.Marker({_x000D_
      position: {_x000D_
        lat: latitud,_x000D_
        lng: longitud_x000D_
      },_x000D_
      title: "Ubicación estudiante"_x000D_
    });_x000D_
    var markerPosicionReal = new google.maps.Marker({_x000D_
      position: {_x000D_
        lat: latitudReal,_x000D_
        lng: longitudReal_x000D_
      },_x000D_
      title: "Mi actual ubicación"_x000D_
    });_x000D_
_x000D_
    // Mostramos los marcadores en el mapa._x000D_
    markerMiPosicion.setMap(map);_x000D_
    markerPosicionReal.setMap(map);_x000D_
_x000D_
  }_x000D_
_x000D_
  // En caso de no poder geolocalizar hay que tener un mensaje de error (o acción)_x000D_
  function error() {_x000D_
    alert('No se puede obtener tu ubicación actual')_x000D_
    // un error a valorar es que el usuario no permite la geoloc, code:1_x000D_
  }_x000D_
_x000D_
_x000D_
  // Ahora empleamos todo lo declarado anteriormente._x000D_
  // Comprobamos si el navegador soporta la geolocalización_x000D_
  if (navigator.geolocation) {_x000D_
    //Caso SI soporta geolocalización. Ejecuto la API y llamo a mis funciones._x000D_
    navigator.geolocation.getCurrentPosition(localizacion, error);_x000D_
  } else {_x000D_
    //Caso NO soporta geolocalización_x000D_
    alert('Navegador NO soporta geolocalización');_x000D_
  }_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<div id="Mapa"></div>_x000D_
_x000D_
<input type="button" id="UbicacionPersonal" value="Mi ubicación">

_x000D_

_x000D_

_x000D_

¡Salud!

solución

Respecto a tu código, estás declarando las variables latitudReal y longitudReal como nulas:

var latitudReal = null;
var longitudReal = null;

Sólo le asignas valor si acaso el usuario pincha en el botón #UbicacionPersonal.

$('#UbicacionPersonal').click(function() {
  latitudReal = posicion.coords.latitude;
  longitudReal = posicion.coords.longitude;
});

Sin embargo, aunque el usuario no ha presionado el botón, tu código sigue adelante e intenta dibujar el marker con la ubicación del usuario:

var markerPosicionReal = new google.maps.Marker({
  position: {
    lat: latitudReal,
    lng: longitudReal
  },
  title: "Mi actual ubicación"
});

// Mostramos los marcadores en el mapa.
markerMiPosicion.setMap(map);
markerPosicionReal.setMap(map);

Cuando instancias markerPosicionReal las variables latitudReal y longitudReal siguen siendo nulas (el usuario no ha presionado el botón) y google maps no puede dibujar un marker con coordenadas nulas.

Lo correcto sería dibujar ese marcador dentro del listener del click del botón:

$('#UbicacionPersonal').click(function () {
    latitudReal = posicion.coords.latitude;
    longitudReal = posicion.coords.longitude;
    var markerPosicionReal = new google.maps.Marker({
        position: {
          lat: latitudReal,
          lng: longitudReal
        },
        title: "Mi actual ubicación"
    });
    markerPosicionReal.setMap(map);
    // Si quieres centrar el mapa en el nuevo marker:
    map.setCenter(markerPosicionReal.getPosition());
});

Y este listener debes declararlo despues de instanciar el mapa porque antes de eso map es undefined.


Dicho lo anterior, hay dos observaciones:

Primero, no vas a poder correr este código en los snippets de stackoverflow porque esos scripts corren en un sandbox en donde el uso de geolocation está explícitamente deshabilitado (el iframe no tiene allow-same-origin en su atributo sandbox):

_x000D_

_x000D_

if (navigator.geolocation) {_x000D_
  navigator.geolocation.getCurrentPosition(function (position) {_x000D_
    console.log(position);_x000D_
  }, function (error) {_x000D_
    console.log(error);_x000D_
  });_x000D_
} else {_x000D_
  //Caso NO soporta geolocalización_x000D_
  alert('Navegador NO soporta geolocalización');_x000D_
}

_x000D_

_x000D_

_x000D_

Segundo, vas a necesitar correr tu código en un sitio con https, porque de lo contrario navegadores como Chrome no te permitirán usar el api geolocation.

Te dejo un ejemplo que sí funciona:

https://jsfiddle.net/amenadiel/6dur3dr8/

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *