API de Google Maps: múltiples direcciones / rutas en el mismo mapa
Tengo un problema para mostrar varias rutas en el mismo mapa de Google.
Tengo una lista de posiciones que obtengo de mi controlador (en este formulario).
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
arriveeLat: 48.784
arriveeLng: 2.40735
departLat: 48.9016
departLng: 2.29873
Me gustaría hacer que todas las rutas se muestren en el mismo mapa. Actualmente, solo se muestra uno (el último probablemente)
var map;
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
directionsDisplay.setMap(map);
var listPos = <?php echo json_encode($listPos); ?>;
for (var i = 0; i < listPos.length; i++) {
var startPoint = new google.maps.LatLng(listPos[i]['departLat'], listPos[i]['departLng']);
var endPoint = new google.maps.LatLng(listPos[i]['arriveeLat'], listPos[i]['arriveeLng']);
calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint);
}
}
function calculateAndDisplayRoute(directionsService, directionsDisplay, startPoint, endPoint) {
directionsService.route({
origin: startPoint,
destination: endPoint,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Impossible d afficher la route ' + status);
}
});
}