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

javascript google-maps routes polyline
Chintan Patel picture Chintan Patel · Mar 4, 2012 · Viewed 21.6k times · Source

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

img

I want something like this

img

Please help.

Help will be appreciated.

Answer

Dr.Molle picture Dr.Molle · Mar 4, 2012

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

Related questions

Selecting last element in JavaScript array

I'm making an application that updates a user's location and path in real time and displays this on a Google Map. I have functionality that allows multiple users to be tracked at the same time using an object, which is …

Read More
Google Maps JS API v3 - Simple Multiple Marker Example

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex. Let's use …

Read More
Google Maps API v3: How to remove all markers?

In Google Maps API v2, if I wanted to remove all the map markers, I could simply do: map.clearOverlays(); How do I do this in Google Maps API v3? Looking at the Reference API, it's unclear to me.

Read More