Google Maps API Tutorial

© 2006, 2007,2008, 2009 Mike Williams

 
Translate this page:

 

Arrows

It's possible to put arrowheads onto polylines by using the Google direction marker triangle icons.

The direction markers have names like "dir_0.png", "dir_3.png", up to "dir_117.png". The numbers indicate the direction in degrees. Only integers that are a multiple of 3 are supported. Only values below 120 degrees are supported, but since the marker has threefold symmetry, it looks the same if rotated back by 120 degrees.

Here's an example

In the upper polyline of that example, I calculate the bearing between the last two points in the array that's used to create the polyline, and place the arrowhead, pointing in that direction, over the last point of the polyline.

In the lower polyline of that example, I calulate the bearing between the previous point and the next point to determine a tangent direction.

Back to Mike's Homepage
Up to the start of this tutorial