How to overlay an image in Google Maps (v3) in a specific direction (bearing)?

Question

I have an arrow image that I would like to put on a v3 Google Map and have it point to a specific direction (using bearing from a particular Lat/Long point). Is this possible?

Thanks.

Answer 1

There are two ways to tackle this:

• Generate 360 arrow icons, each rotated by 1 degree, and then call the relevant one according to the direction required. You may want to call the arrows something like "arrow_123.png" to indicate 123 degrees.

  You will often not require 1 degree precision. In that case you may want to generate just 36 icons at 10 degree increments, for example. Then simply use the icon that is closest to the nearest representation.

• You can also use the HTML 5 canvas to rotate the icon by an arbitrary degree as in the following Stack Overflow post: Show wind direction on Google Maps. However note that this will not work in browsers that do not support the canvas element, such as Internet Explorer.