Draw arrow at the end of line drawn between two markers on the jvector map

Question

I am trying to draw an arrow at the end of the line between any markers on the map. I am creating line using svg as :

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);

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 :

http://jsfiddle.net/Z5Qkf/1/

here is the example jvectormap at JSFiddle http://jsfiddle.net/ruzel/V8dyd/

Can you please help me out or suggest some options as I am new to svg and drawing objects in javascript using svg. Thanks

Answer 1

I did it.

Here is what I did, if someone is looking for the answer : https://github.com/mushtaqak/fancyWorldMap