Multiple markers with google maps API route, drawn by distance

Question

I'm creating a route on Google maps. The route has a start and endpoint with about 10 waypoints along the way.

What i'd like to do is 'walk' virtualy over this route, doing so i want to display a marker (depending on distance in meters) how far i have walked so far.

I've got it all set, the route, the distance in meters, the only thing that i cannot get to work is adding a marker ON the route.

Startpoint (0) ---------(marker 300 meter)-------------------- Endpoint (1000)

https://developers.google.com/maps/documentation/javascript/directions

I'm using the code as documented, here is my jscode fwiw

// I'm getting a startpoint (stockholm) endpoint (italy) and 
// array of 10 waypoints of other places in europe along the way

function initMap(startCoordinate, endCoordinate, waypoints) {
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 50.60, lng: 8.36 },
    mapTypeId: 'terrain'
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: false,
    map: map,
    panel: document.getElementById('right-panel')
});

var start = new google.maps.LatLng(startCoordinate);
var end = new google.maps.LatLng(endCoordinate);

directionsDisplay.addListener('directions_changed', function () {
    computeTotalDistance(directionsDisplay.getDirections());
});

displayRoute(start, end, directionsService, directionsDisplay, waypoints);
}

function displayRoute(origin, destination, service, display, waypoints) {

if (waypoints.length > 1)
{
    waypoints.shift();
    waypoints.pop();
}

service.route({
    origin: 'Centralplan 15, 111 20 Stockholm',
    destination: 'Piazza Giuseppe Garibaldi, 80142 Napoli, Italië',
    waypoints: waypoints,
    travelMode: 'DRIVING',
    avoidTolls: true
}, function (response, status) {
    if (status === 'OK') {
        display.setDirections(response);
    } else {
        console.log('Could not display directions due to: ' + status);
        console.log(response);
    }
});

I have looked into http://www.geocodezip.com/v3_animate_marker_directions.html but this is an animation on the route, i just need a still marker. It does however place a marker on route, i cannot seem to figure out exactly how it does that.

so you know the marker coordinates and don't know how to display it ? — ValLeNain, Aug 08 '17 at 11:10
Hi, no i dont know the marker coordinates since the route displayed is variable. I can only get the coords of the start and endpoint. The line drawn between the two points is something the google maps library seems to do automatically — Michael Beuving, Aug 08 '17 at 11:12
i do have the variables where the marker should be placed. That is, between point a and point b, say point a to b is 20km, and i have a variable that says 15 kilometer the marker should be placed 15 kilomter away from point a, on route to point b — Michael Beuving, Aug 08 '17 at 11:17
Thank you, i have seen that before, but a polyline is not the same as a route(direction). Example of route(direction) https://www.google.nl/maps/dir/Boston,+Massachusetts,+USA/New+York,+USA/@41.5368177,-73.0926148,9z/data=!3m1!4b1!4m13!4m12!1m5!1m1!1s0x89e3652d0d3d311b:0x787cbf240162e8a0!2m2!1d-71.0588801!2d42.3600825!1m5!1m1!1s0x89c24fa5d33f083b:0xc80b8f06e177fe62!2m2!1d-74.0059413!2d40.7127837?hl=en — Michael Beuving, Aug 08 '17 at 11:35

score 1 · Accepted Answer · answered Aug 08 '17 at 11:38

You will basically need to loop through the DirectionsLegs of your route, then in its DirectionsSteps and maybe substeps (DirectionsStep has an array of DirectionsSteps) until you find one which has your point A as start_location.

So you will now have the equivalent of a portion of line, and will be able to do what's describe here.

Multiple markers with google maps API route, drawn by distance

1 Answers1