Ich möchte mit V3 der Google Maps-API eine Polylinie für die zurückgelegte Entfernung über eine voreingestellte Route zeichnen.

Die Polylinie müsste durch mehrere Wegpunkte / Abschnitte verlaufen.

Ich benutze derzeit den DirectionsService, um die komplette Route zu zeichnen.

Ich benutze auch epolys.js, um die Markierungsposition für die zurückgelegte Strecke zu ermitteln.

Ich kopiere die komplette Route in eine neue Polylinie, aber ich möchte nur die Route bis zur Markierungsposition kopieren.

Demo Link:http: //codepen.io/1983ron/pen/wKMVQ

nd hier, wo ich gerade bei der JS b

var geocoder;
var map;
var marker;
var gmarkers = [];
var METERS_TO_MILES = 0.000621371192;
var walked = (Math.round(670 * 1609.344));

//ICON
var iconImage = new google.maps.MarkerImage(
    'http://www.ronnieatkinson.co.uk/clients/wc2015/maps/01/mapIcons/marker_red.png',       //MARKER URL
    new google.maps.Size(20, 34),   //MARKER SIZE (WxH)
    new google.maps.Point(0,0),     //MARKER ORIGIN
    new google.maps.Point(9, 34)    //MARKER ANCHOR
);

//SHADOW
var iconShadow = new google.maps.MarkerImage(
    'http://www.google.com/mapfiles/shadow50.png',  //SHADOW URL
    new google.maps.Size(37, 34),                   //SHADOW SIZE (WxH)
    new google.maps.Point(0,0),                     //SHADOW ORIGIN
    new google.maps.Point(9, 34)                    //SHADOW ANCHOR
);

//INFO WINDOW
var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50)
});

//CREATE MARKER
function createMarker(latlng, label, html) {
    var contentString = '<b>'+label+'</b><br>'+html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        shadow: iconShadow,
        icon: iconImage,
        title: label,
        zIndex: Math.round(latlng.lat()*-100000)<<5
    });

    marker.myname = label;
    gmarkers.push(marker);

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
    });
    return marker;
}

function initialize() {
    var latlng = new google.maps.LatLng(51.555967, -0.279736);
    var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById("map"), myOptions);

    var rendererOptions = {
        map: map,
        suppressMarkers: true,
    };

    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    //Edinburgh to Eden Project
    var point1 = new google.maps.LatLng(58.981386, -2.973751); //Orkney Rugby Football Club
    var point2 = new google.maps.LatLng(55.881517, -4.342057); //Scotstoun Stadium
    var point3 = new google.maps.LatLng(54.998080, -7.319812); //Guildhall St
    var point4 = new google.maps.LatLng(54.563716, -5.942729); //Belfast Harlequins RFC
    var point5 = new google.maps.LatLng(53.271057, -9.054253); //Hotel Spanish Arch
    var point6 = new google.maps.LatLng(52.674222, -8.642515); //Thomond Park
    var point7 = new google.maps.LatLng(53.291755, -3.713769); //Colwyn Leisure Centre
    var point8 = new google.maps.LatLng(51.748180, -3.618567); //Glynneath Rugby Football Club

    var wps = [
        { location: point1 },
        { location: point2 },
        { location: point3 },
        { location: point4 },
        { location: point5 },
        { location: point6 },
        { location: point7 },
        { location: point8 }
    ];

    //START
    var org = new google.maps.LatLng (55.945315, -3.205309); //EDINBURGH 

    //FINISH
    var dest = new google.maps.LatLng (50.360130, -4.744717); //EDEN PROJECT

    var request = {
        origin: org,
        destination: dest,
        waypoints: wps,
        travelMode: google.maps.DirectionsTravelMode.WALKING,
        //unitSystem: google.maps.UnitSystem.IMPERIAL
    };

    directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            //SHOW ROUTE
            directionsDisplay.setDirections(response);

            //COPY POLY FROM DIRECTION SERVICE
            var polyline = new google.maps.Polyline({
                path: [],
                strokeColor: '#FF0000',
                strokeWeight: 3
            });

            var bounds = new google.maps.LatLngBounds();
            var legs = response.routes[0].legs;
            for (i=0;i<legs.length;i++) {
                var steps = legs[i].steps;
                for (j=0;j<steps.length;j++) {
                    var nextSegment = steps[j].path;
                    for (k=0;k<nextSegment.length;k++) {
                        polyline.getPath().push(nextSegment[k]);
                        bounds.extend(nextSegment[k]);
                    }
                }
            }

            polyline.setMap(map);
            map.fitBounds(bounds);

            //alert(walked);

            //ADD MARKER TO NEW POLYLINE AT 'X' DISTANCE
            createMarker(polyline.GetPointAtDistance(walked), "You are here", (Math.round( walked * METERS_TO_MILES * 10 ) / 10)+' miles');

            //GET THE TOTAL DISTANCE
            var distance= 0;
            //var METERS_TO_MILES = 0.000621371192;
            for(i = 0; i < response.routes[0].legs.length; i++){
                //FOR EACH LEG GET THE DISTANCE AND ADD IT TO THE TOTAL
                distance += parseFloat(response.routes[0].legs[i].distance.value);
            }
            //alert((Math.round( distance * METERS_TO_MILES * 10 ) / 10)+' miles');
            //alert(distance); //METERS

        } else if(status == google.maps.DirectionsStatus.MAX_WAYPOINTS_EXCEEDED){
            alert ('Max waypoints exceeded');
        } else {
            alert ('failed to get directions');
        }
    });
};window.onload = function() { initialize(); };

Jede Hilfe wäre dankbar.