How did Google Maps draw routes on a DIV?

Question

I'm curious how Google Maps draws blue routes on DIV elements on Google maps. I know how to do this on a Canvas element, but Google maps do not use HTML5 canvas, and they draw complex lines in a 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.

thank

Answer 1

Whereas earlier they used images displayed on the server side. Currently, the solution is to use the vector graphics API in major browsers.

AFAIK, SVG , IE (Mozilla SVG), IE VML ( IE9 Beta) VML ). IE9 Beta SVG, IE9 +, SVG, .

Firebug IE Developer, SVG (svg tags)/VML ( ).

EDIT: . , SVG/VML (, ) Javascript

Answer 2

http://code.google.com/apis/maps/documentation/javascript/services.html#DraggableDirections

" ".

, . http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polylines

Answer 3

When you request a route by analyzing points or an address, Google servers retrieve you a result object ( APi Reference of the result object ) that contains a lot of information that is used to draw a “blue line” on the map. The function that draws lines on the map is DirectionsRenderer.setDirections(response).

Inside setDirections, what Google does is basically read the answer LatLngsand draw it like a polyline on a map. Polylines have no point restrictions.