Question

I am curious as to how Google Maps draws the Blue routes on DIV elements on Google maps. I know how to do it on a Canvas element, but Google maps does not use HTML5 canvas and they draw complex lines on the DIV.

How do they do it?

To be clear: I want to know how they draw the blue lines when we get directions from point A to B. Not how the route is calculated.

Thanks

Answer 1

A while back they used to use images rendered on the server side. The current solution is to use the vector graphics API’s in the major browsers.

AFAIK, they now use SVG for non-IE browsers (Mozilla SVG) and IE uses VML (up to and including IE9 Beta) (VML on Wikipedia). The IE9 Beta supports SVG so I’d expect to see IE9+ using SVG as well in the future.

Using Firebug or the IE Developer tools you can see the SVG (svg tags) /VML (shape tags) markup.

EDIT: Reading your comment. I expect its a combination of normally rendered SVG/VML markup with the live changes (eg. route changes) through Javascript