Waypoints en JavaScript desde InputBox
Publicado por Alejandro (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.
Un saludo y gracias.
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
0
