How to add direction on tracking path for google maps

Question

I am showing the tracking on map with marker points and line connecting them.

The problem is that i want to show the direction of travel on the links;

so I am not getting how to show the direction on the line between the marker points.

Is there any way to accomplish this task.

Answer 1

Showing the direction on the polyline can be accomplished with arrows.

There are some predefined paths that the google maps api3 provides.

See this section of the documentation - SYMBOLS ON POLYLINE, that can be used other than an arrow.

Have a look at this fiddle that uses an arrow to indicate the direction on the polyline.

DEMO with a sigle symbol

You can also set the repeat property for the symbol so that it repeats for regular intervals.

DEMO with repeating symbols

JavaScript-

var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polylineoptns = {
    path: markers,
    strokeOpacity: 0.8,
    strokeWeight: 3,
    map: map,
    icons: [{
        icon: iconsetngs,
        offset: '100%'}]
};
polyline = new google.maps.Polyline(polylineoptns);

The interesting feature of this predefined symbol(the forward arrow specially) is that the arrow points towards the exact direction of which your co-ordinates are located. So, that obviously serves the purpose of denoting the direction in a Tracking System.

UPDATE: Not sure about the point you are trying to tell in the comments. The markers can be displayed the same way. Here is the code that adds markers with a loop and also set the polyline with arrows:

DEMO WITH MARKERS AND POLYLINE

Javascript:

var polylineoptns = {
        strokeOpacity: 0.8,
        strokeWeight: 3,
        map: map,
        icons: [{
            repeat: '70px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
            icon: iconsetngs,
            offset: '100%'}]
    };
    polyline = new google.maps.Polyline(polylineoptns);
    var z = 0;
    var path = [];
    path[z] = polyline.getPath();
    for (var i = 0; i < markers.length; i++) //LOOP TO DISPLAY THE MARKERS
    {
        var pos = markers[i];
        var marker = new google.maps.Marker({
            position: pos,
            map: map
        });
        path[z].push(marker.getPosition()); //PUSH THE NEWLY CREATED MARKER'S POSITION TO THE PATH ARRAY
    }