title: Draw arrow at the end of line drawn between two markers on the jvector map
body: <p>I am trying to draw an <strong>arrow at the end of the line</strong> between any markers on the map. I am creating line using svg as :</p>
  
  <pre><code>var map = $('#map').vectorMap('get', 'mapObject');
  var draw = SVG('svgMapOverlay').size(660, 400);
  var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]);
  var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]);
  draw
   .path()
   .attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 })
   .M(coords1.x, coords1.y)
   .L(coords2.x, coords2.y);
  </code></pre>
  
  <p>I am able to draw lines between two markers but not the arrow at the end of the line.  What I want is like this : </p>
  
  <p><a href="http://jsfiddle.net/Z5Qkf/1/" rel="nofollow">http://jsfiddle.net/Z5Qkf/1/</a></p>
  
  <p>here is the example jvectormap at JSFiddle <a href="http://jsfiddle.net/ruzel/V8dyd/" rel="nofollow">http://jsfiddle.net/ruzel/V8dyd/</a></p>
  
  <p>Can you please help me out or suggest some options as I am new to svg and drawing objects in javascript using svg. Thanks</p>