How to draw an arrow on every polyline segment on Google Maps V3

Question

I was looking for a solution to this problem on stackoverflow but since I couldn't find the accurate solution I ended up solving it myself and post it here, hope it help.

Google Maps provides you the Polyline feature, which based on a list of coordinates can draw a series of lines joining all of them.

You can draw a polyline with a single arrow with the following code:

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

     var polyline = new google.maps.Polyline({
            path: allCoordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });

The problem here is that the arrow will be only drawn in the last segment as shown in the next picture, but sometimes the route could be not so straightforward and we need to add an arrow on every segment.

The attribute 'repeat' inside the icon definition could be another option but allows only to define a measure in pixels and that definelty won't match with every change of direction on the polyline.

So, one way I found to achive this was to make several polylines, one per segment allowing in that case the arrow to be drawn on each one. This is the code:

     var allCoordinates = [
        new google.maps.LatLng(26.291, 148.027),
        new google.maps.LatLng(26.291, 150.027),
        new google.maps.LatLng(22.291, 153.027),
        new google.maps.LatLng(18.291, 153.027)
    ];

    for (var i = 0, n = allCoordinates.length; i < n; i++) {

        var coordinates = new Array();
        for (var j = i; j < i+2 && j < n; j++) {
            coordinates[j-i] = allCoordinates[j];
        }

        var polyline = new google.maps.Polyline({
            path: coordinates,
            strokeColor: color,
            strokeOpacity: 1.0,
            strokeWeight: 2,
            geodesic: true,
            icons: [{
                icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
                offset: '100%'
            }]
        });
        polyline.setMap(map);
        polylines.push(polyline);

    }

And this is the Picture:

I hope this works for anyone who is looking for something like this!

Answer 1

There is a repeat property for the icon options object. The example of dashed lines from the Google Maps JS API shows a way to do this with repeating symbols on the line instead of creating new Polylines. In the context of your example, it would look something like this:

var allCoordinates = [
    new google.maps.LatLng(26.291, 148.027),
    new google.maps.LatLng(26.291, 150.027),
    new google.maps.LatLng(22.291, 153.027),
    new google.maps.LatLng(18.291, 153.027)
];

var polyline = new google.maps.Polyline({
    path: allCoordinates,
    strokeColor: color,
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    icons: [{
        icon: {path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW},
        offset: '100%',
        repeat: '20px'
    }]
});
polyline.setMap(map);
polylines.push(polyline);

This creates arrows along the lines like so:

Answer 2

Here is a version with a simpler loop and a custom symbol so you can resize and modify it as needed - the google.maps.SymbolPath.FORWARD_CLOSED_ARROW is a fixed size - the scale property doesn't affect it.

const drawLines = (map, maps, places) => {
  const arrow = {
    path: 'M 0,0 5,15 -5,15 0,0 z', // 0,0 is the tip of the arrow
    fillColor: 'red',
    fillOpacity: 1.0,
    strokeColor: 'red',
    strokeWeight: 1,
  };
  const newLines = [];
  for (let i = 0; i < places.length - 1; i++) {
    const line = new maps.Polyline({
      path: places.slice(i, i+2),
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2,
      icons: [{
        icon: arrow,
        offset: '100%',
      }]
    });
    line.setMap(map);
    newLines.push(line);
  }
}