javascript - Create custom symbol on polyline using SVG path

Question

I am trying to create a flight route using google maps with animation. Is it possible to create a polyline path with custom symbol of airplane as in the demo site of http://www.morethanamap.com/demos/visualization/flights

I am able to create a dashed path with animation. The problem is I have am stuck with creating SVG path. I did try to render a Bezier Curves from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths with path given as "M10 10 C 20 20, 40 20, 50 10" but to no avail.

new google.maps.Polyline({
                    path: [
                        new google.maps.LatLng(40, -80),
                        new google.maps.LatLng(-50, 80)
                    ],
                    geodesic: true,
                    strokeOpacity: 0.0,
                    strokeColor: 'yellow',
                    icons: [{
                            icon: {
                                path: 'M 0,-2 0,2',
                                strokeColor: 'red',
                                strokeOpacity: 1.0,
                            },
                            repeat: '24px'
                        }],
                    map: map,
                });

Answer 1

The SVG path used on that demo is:

M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-3    2.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684

I pasted that into this demo online svg editor, scaled to fit.

 var planeSymbol = {
    path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
    scale: 0.0333, 
    strokeOpacity: 1,
    color: 'black',
    strokeWeight: 1
 };

working example

proof of concept fiddle

code snippet:

function initialize() {
    var mapOptions = {
      zoom: 6,
      center: new google.maps.LatLng(20.291, 153.027),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // [START region_polyline]
    // Define a symbol using SVG path notation, with an opacity of 1.
    var planeSymbol = {

      path: 'M362.985,430.724l-10.248,51.234l62.332,57.969l-3.293,26.145 l-71.345-23.599l-2.001,13.069l-2.057-13.529l-71.278,22.928l-5.762-23.984l64.097-59.271l-8.913-51.359l0.858-114.43 l-21.945-11.338l-189.358,88.76l-1.18-32.262l213.344-180.08l0.875-107.436l7.973-32.005l7.642-12.054l7.377-3.958l9.238,3.65 l6.367,14.925l7.369,30.363v106.375l211.592,182.082l-1.496,32.247l-188.479-90.61l-21.616,10.087l-0.094,115.684',
      scale: 0.0333,
      strokeOpacity: 1,
      color: 'black',
      strokeWeight: 1,
      anchor: new google.maps.Point(300, 300)
    };
    var lineCoordinates = [
      new google.maps.LatLng(22.291, 154.027),
      new google.maps.LatLng(21.291, 155.027),
      new google.maps.LatLng(20.291, 156.027),
      new google.maps.LatLng(45.291, 158.027),

      new google.maps.LatLng(51.47238, -0.45093999999994594)
    ];
    var visibleLine = new google.maps.Polyline({
      path: lineCoordinates,
      strokeOpacity: 0.3,
      map: map
    });

    var staticMark = new google.maps.Marker({
      map: map,
      position: lineCoordinates[0],
      icon: planeSymbol,
      visible: false // hide the static marker
    });
    var bounds = new google.maps.LatLngBounds();
    bounds.extend(lineCoordinates[0]);
    bounds.extend(lineCoordinates[4]);
    // Create the polyline, passing the symbol in the 'icons' property.
    // Give the line an opacity of 0.
    var line = new google.maps.Polyline({
      path: lineCoordinates,
      strokeOpacity: 0,
      icons: [{
        icon: planeSymbol,
        offset: '0'
      }],
      map: map
    });
    map.fitBounds(bounds);
    animatePlane(line);

    // [END region_polyline]
  }
  // Use the DOM setInterval() function to change the offset of the symbol
  // at fixed intervals.

function animatePlane(line) {
  var count = 0;
  window.setInterval(function() {
    count = (count + 1) % 2000;

    var icons = line.get('icons');
    icons[0].offset = (count / 20) + '%';
    line.set('icons', icons);
  }, 20);
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>