Question

I have the need to split a long route into two parts, one part using motorways and the other not. I have coded two routes

var request1 = {
    origin: startlatlng,
    destination: joinLatLng,
    waypoints: [{ location: day1 }, { location: day2 }, { location: day3 }],
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

and

var request2 = {
    origin: joinLatLng,
    destination: endlatlng,
    avoidHighways: true,
    waypoints: [{ location: day7 }, { location: day8 }, { location: day9 }, { location: day10 }, { location: day11 },
                { location: day12 }, { location: day13}],
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

but when I plot each one using

directionsService.route(request1, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

and

directionsService.route(request2, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
    }
});

only the second is being displayed. Does anyone have any suggestions as to how I could concatenate the two routes?

Answer 1

directionsDisplay is a DirectionsRenderer object. It can only render one set of directions at once. If you create 2 directions renderer objects, such as directionsDisplay1 and directionsDisplay2, each can render one half of the route on the map at the same time