How to show travel DIRECTION ARROW in Google Map Javascript API when using POLY LINE?

Question

Using Google maps javascript API i want to draw arrow on top of the poly line so when the user is looking at the Map he would understand that some one traveled from here and to here.

The existing functionality

I want something like this

Please help.

Help will be appreciated.

Solution

You may calculate the angle between two points, here's a how-to.

Depending on the calculated angle you can place a marker at the start-point. Here you find the description of the markers: http://sites.google.com/site/gmapicons/home/ (Direction indicators)

---

Edit:

See a demo: http://jsfiddle.net/doktormolle/9gJjj/

You'll find a function fx() there which expects a DirectionsRoute as argument and draws the markers.

---

Edit2:

Note that you may also use an IconSequence which may be a better approach, See: Google Map API Direction Triangle Icon Ambiguous

Comments

[Chintan Patel]

Hi thanks for this but i am not able to get how to achieve this when i have Geographical coordinates.