CODEWITHSUNDEEP
javascripthtml
arbithero
arbithero

Reputation: 436

How does Google Maps draw routes on a DIV?

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

Upvotes: 3

Views: 1513

Answers (3)

Daniel
Daniel

Reputation: 307

When you ask for a route, parsing the points or the address, Google's servers retrieves you the result object (APi Reference of Result Object) wich contains a lot of infos that is used to draw the "blue line" in the map. The function that draw the lines in the map is DirectionsRenderer.setDirections(response).

Inside setDirections, what Google do is basically read the response's LatLngs and draw it as Polyline in the map. The Polylines doesn't have limitations of points.

Upvotes: 0

Dave L
Dave L

Reputation: 984

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

Upvotes: 4

Jason
Jason

Reputation: 2727

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

"Directions are displayed as a polyline drawing".

This is a polyline overlay, see: http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polylines

Upvotes: 0

Related Questions