1

Estoy trabajando con la API de Google Maps y quería generar la ruta entre dos puntos pero no se muy bien como. He estado leyendo la documentación y veo que se tiene que definir mediante los parámetros origin: y destination:pero no me queda claro donde debo definirlo.

¿Alguien puede ayudarme?

Mi intención es que si pulsan el botón trazar, se genere la ruta.

¡Salud!

$(document).ready(function() {

  function localizacion(posicion) {
    // Coordenadas oficina
    var latitud = 39.579745;
    var longitud = 2.654018;

    //Generamos el mapa que muestre y cual será el punto central
    var map = new google.maps.Map(document.getElementById('Mapa'), {
      center: {
        lat: latitud,
        lng: longitud
      },
      zoom: 14
    });

    //Generamos el marcadores para señalar una posición
    var markerMiPosicion = new google.maps.Marker({
      position: {
        lat: latitud,
        lng: longitud
      },
      title: "Ubicación oficina estudiante"
    });

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

    // Si clican sobre botón ubicación usuario
    $('#UbicacionPersonal').click(function() {
      // Obtenemos coordenadas
      var latitudReal = posicion.coords.latitude;
      var longitudReal = posicion.coords.longitude;

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

      // Lo mostramos sobre el mapa.
      markerPosicionReal.setMap(map);
    });

    $('#TrazarRuta').click(function() {
      origin: latitudReal,
      longitudReal;
      destination: latitud,
      longitud;
    });

  }

  // En caso de no poder geolocalizar hay que tener un mensaje de error (o acción)
  function error() {
    alert('No se puede obtener tu ubicación actual')
    // un error a valorar es que el usuario no permite la geoloc, code:1
  }

  // Ahora empleamos todo lo declarado anteriormente.
  // Comprobamos si el navegador soporta la geolocalización
  if (navigator.geolocation) {
    //Caso SI soporta geolocalización. Ejecuto la API y llamo a mis funciones.
    navigator.geolocation.getCurrentPosition(localizacion, error);
  } else {
    //Caso NO soporta geolocalización
    alert('Navegador NO soporta geolocalización');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Mapa"></div>

<div id="Info-Mapa">
  <div class="ExtraInfo" id="Como-Llegar">
    <p class="Texto" id="Texto-Llegar">
      A continuación puedes ver tu ubicación actual.
    </p>
    <input type="button" class="BotonMap" id="UbicacionPersonal" value="Mi ubicación">
    <p class="Texto">
      También puedes trazar la ruta hasta la oficina en coche.
    </p>
    <input type="button" class="BotonMap" id="TrazarRuta" value="Trazar">
  </div>
</div>

4
  • Por lo que veo tu código sigue igual a como estaba en la pregunta es.stackoverflow.com/questions/138378/…, no veo que hayas tratado de usar Directions API
    – ffflabs
    el 20 feb. 2018 a las 23:00
  • @amenadiel Sí es el mismo código porque se que hasta aquí funciona y realmente en este caso, considero que tengo más un error de conceptos (de ser novato) que un fallo de programación. Ahora he añadido la última prueba que hice.
    – Lleims
    el 21 feb. 2018 a las 10:09
  • Un momento, ¿entiendo por tu comentario que hay otra API aparte de la "normal" de maps solo para generar rutas? Yo he usado la API de maps, no sabía que hubiera varias
    – Lleims
    el 21 feb. 2018 a las 10:10
  • Puedes usar directions API directamente instanciando un objeto google.maps.DirectionsService sigue el ejemplo en developers.google.com/maps/documentation/javascript/examples/…
    – ffflabs
    el 21 feb. 2018 a las 13:23

1 respuesta 1

2

Respuesta corta: aquí hay un fiddle funcionando.

Respuesta larga:

Primero: Tu mapa se inicializa una vez que conoces las coordenadas del visitante. Como le pones un centro arbitrario y el visitante puede estar en Vladivostok, difícilmente habrá una ruta disponible, así que cambié tu código para que fije el centro del mapa (y el primer marcador) relativamente cerca de la ubicación del visitante usando Math.random().

var randomLat = Math.random(),
  randomLng = Math.random();;

randomLat = (randomLat < 0.5) ? -1 * randomLat : randomLat - 0.5;
randomLng = (randomLng < 0.5) ? -1 * randomLng : randomLng - 0.5;

var latitudReal = posicion.coords.latitude,
  longitudReal = posicion.coords.longitude,
  latitud = latitudReal + randomLat/10,
  longitud = longitudReal + randomLng/10;

Segundo: necesitas instanciar un objeto google.maps.DirectionsService para pedir rutas, y un objeto google.maps.DirectionsRenderer para dibujar el resultado sobre el mapa.

//Generamos el mapa que muestre y cual será el punto central
var map = new google.maps.Map(document.getElementById('Mapa'), {
  center: {
    lat: latitud,
    lng: longitud
  },
  zoom: 14
});

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

Finalmente, dado que conoces el centro del mapa y la posición del visitante:

$('#TrazarRuta').click(function () {
  directionsService.route({
    origin: markerInicial.getPosition(),
    destination: {
      lat: latitudReal,
      lng: longitudReal
    },
    travelMode: 'DRIVING'
  }, function (response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
});

El objeto de opciones que le das al método route soporta distintos métodos de desplazamiento (conduciendo, caminando, bicicleta, transporte público), y puntos intermedios si quieres que la ruta pase por éstos.

El objeto directionsDisplay también soporta opciones, como darle estilo a la polilínea, hacerla draggable y más.

1
  • Ya se que no hay que contestar esto en el foro, pero quería decirte que mil gracias, explicación genial :)
    – Lleims
    el 22 feb. 2018 a las 12:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.