JavaScript - Waypoints en JavaScript desde InputBox

   
Vista:
Imágen de perfil de Alejandro

Waypoints en JavaScript desde InputBox

Publicado por Alejandro alejandrosaurarodriguez@gmail.com (2 intervenciones) el 02/10/2015 08:08:30
Hola a tod@s,

llevo un par de semanas intentando realizar una aplicación en JavaScript con el API de Google Maps. En concreto, tengo un origen y un destino. Con esto, calcula la ruta y me da la distancia recorrida en el trayecto.

El problema viene cuando quiero meter más de dos direcciones. He probado con el ejemplo de Google pero las direcciones se encuentran en un select donde cambio el value de cada option y no me parece atractivo sino que preferiría poder insertar la dirección en un input y a funcionar. Además de esto, si no inserto una de las 4 direcciones intermedias, la aplicación no funciona ya que encuentra un valor vacio.

En fin, algún ejemplo o idea de como tomar los waypoints desde un input y poder añadir solo el número de waypoints que interese???

Adjunto código.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<body>
    <div id="map"></div>
    <div id="right-panel">
    <div>
    <h1> Calculo de ruta!!!</h1>
    <b>Inicio:</b></br><input type="text" name="start" id="start" /></br>
    <br>
    <b>Introduce punto1:</b><input type="text" id="valor1"/></br>
    <b>Introduce punto2:</b><input type="text" id="valor2"/></br>
    <b>Introduce punto3:</b><input type="text" id="valor3"/></br>
    <b>Introduce punto4:</b><input type="text" id="valor4"/></br>
<select multiple id="waypoints">
      <option value="murcia">Parada 1</option>
      <option value="murcia">Parada 2</option>
      <option value="murcia">Parada 3</option>
      <option value="murcia">Parada 4</option>
    </select>
    <br>
    <b>Destino:</b></br><input type="text" name="end" id="end" />
    <br>
      <input type="submit" id="submit">
    </div>
    <div id="directions-panel"></div>
    </div>
    <script>
 
function changeContent(){
     document.getElementById('waypoints').options[0].value = valor1.value;
     document.getElementById('waypoints').options[1].value = valor2.value;
     document.getElementById('waypoints').options[2].value = valor3.value;
     document.getElementById('waypoints').options[3].value = valor4.value;
}
 
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {lat: 37.988, lng: -1.130}
  });
  directionsDisplay.setMap(map);
 
  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}
 
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  changeContent();
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i]) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
 
  }
 
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
            '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
 
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD5FMQAXVUbduKLEO-pzLABfIPxtHz-I8o&signed_in=true&callback=initMap"
        async defer></script>
  </body>


Un saludo y gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

Waypoints en JavaScript desde InputBox

Publicado por txema (25 intervenciones) el 03/10/2015 13:32:54
Hola Alejandro:

A partir del código expuesto me es un poco difícil de explicarte. Y partimos porque el código corresponde a la versión 2 de Google Maps, ya obsoleta. Vamos por la v3.21. El enlace sería
1
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
(Yo suelo insertar este enlace y el Javascript en el head).

Dado que el Javascript es válido (con matices), quiero que te detengas en var waypts. Es aquí donde se recorre en forma de array los puntos intermedios. En el ejemplo los toma desde un select, pero podemos tomarlo de diferentes estructuras.

Indicas que "... Además de esto, si no inserto una de las 4 direcciones intermedias, la aplicación no funciona ya que encuentra un valor vacio.". La forma de salvar este problema (tomando los valores de tu código) es:
1
2
3
4
5
if (checkboxArray.options[i] != '') {
waypts.push({
location: checkboxArray[i].value,
stopover: true
});


Habría otros muchos aspectos a controlar. Ten en cuenta que entramos en desarrollos específicos a lo que estemos haciendo y resulta difícil encontrar lo que queremos en la web. Además, existen elementos que es necesario conocer y controlar, como stopover, travelMode, unitSystem, optimizeWaypoints, provideRouteAlternatives, avoidHighways, avoidTolls
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alejandro

Waypoints en JavaScript desde InputBox

Publicado por Alejandro alejandrosaurarodriguez@gmail.com (2 intervenciones) el 04/10/2015 13:20:50
Muchas gracias por tu aportación txema!!!

Me has aclarado como funciona a la perfección y me pondré a ello lo antes posible.

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de txema

Waypoints en JavaScript desde InputBox

Publicado por txema (25 intervenciones) el 04/10/2015 16:21:16
Para que veas hasta dónde puedes llegar: son muchas horas de trabajo.

Crear rutas
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar