For the company I work for, I’m developing a mapping system to plot properties on a map.
We are using google maps, with custom markers, and a fare amount of GPolygon to plot the outcodes and sector codes on the map.
Some of our customers unfortunately are using IE7 so I’m doing some client side performance testing.
The test is a real basic one:
I create a GMap, create 5 polygons with 5 corners, create 20 polygons with 20 corners, so the same using svg, plot a matrix of markers 10×10 and then another of 20×20.
Here are some expected but interesting results:
It’s interesting to see that drawing a lot of markers is a lot slower than drawing polygons. I was curious to see how google solved this problem, so running fiddler I started to analyse the my browser requests when viewing properties on google maps.
It turned out, google use layers to plot the markers, so instead of plotting hundreds of elements on top of the map, it’s creating a transparent png image wit those markers on it and than layering this png on top of the map:
So basically the first layer show the earth
the second layer display the streets
and the third layer is where they plot the additional data to display on the map
what they then do is to track the position of the mouse on the map, and as soon as the mouse stops they do a webservice call to get more information about that specific tile.
very smart google, very smart….