Action executed in 0.000

Groking the Google Map

My current project at work has me drawing maps. So when a colleague sent me an interesting "article" regarding Google Maps, i finally understand exactly what's occurring under the covers. So the questions are (1) how many web pages are loaded and (2) who draws the maps? Read on for the answers.

Only one web page (disregarding iframes) is loaded, or at most O(1) web pages are loaded. Proportionally it has very little HTML and a massive amount of Javascript.

Here's revelation #1. The Javascript reconnects to the web server using the XMLHTTP method (ie. not GET nor POST). This is like a GET, but it can take parameters -- grid identifier and zoom level in Google's case -- and returns XML -- or points in this case.

Exactly what data does it get? Street coordinates? From a plane's eye, yes, from a birds eye, no. Closer to the ground it gets curb coordinates. Keep i mind that this is just numerical data, X and Y coordinates.

Who does the rendering? Your web browser does. Not only can Javascript connect to a server. It can also draw lines and polygons. See DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript.

Two things to note. Panning is fast and smooth because new data (n cells) are requested at the same level. Zooming is not because n2 cells are requested at a new zoom level. Also n, the number of cells along one edge of the map, is related to the size of your browser window.

It's time i resurrect my (personal) map drawing project which uses Java instead of Javascript. Here all navigation is smooth and fast. Also it caches geographic information obviating the need to rerequest it.

I leave you with one question. Why doesn't Google tie zooming to the mouse wheel?


none yet

Post a Comment

* indicates a required field
anonymous (If you want to identify yourself, please sign in first.)
required This field is required.

Max size is 2 MB, aspect ratio 3:4 width:height
required This field is required.
Please include a short description.
required This field is required.

480 characters remaining.
is public

(Use this field if you have to. 3000 characters remaining.)
1 dime, 1 quarter, 1 nickel, 2 pennies + 100

Trackback URL