Solution to Huge Numbers of Overlays with the Google Maps API
Cross-posted to the Google Maps API discussion group (click here):
There has been a lot of discussion on a large amount of overlays on a single Google map. Different hacks have approached this problem in different ways. Many sites do not even deal with it because they can’t, don’t know how, or don’t want to.
The capability to display a huge amount of overlays I believe should be handled somehow by the Google Maps tool itself. However, since most, if not all of Google Maps is written in JavaScript this may be a problem. The JavaScript would have to load a large file and then query it. For JavaScript, this would take a long time if the file was large.
I’m going to explain a solution which is derived from what I’ve seen on a few different sites, and what I think would be the best. It uses PHP and MySQL, but I’m sure you could substitute in other technologies like ASP and Access, or JSP and Oracle for example. What would be an even better thing to do would be to figure out how to get a real GIS map server (Google it) to interact with Google’s native overlays, but for those of you who just need a simple solution, here it goes.
You would use PHP along with a MySQL table full of Overlay information. Then, the JavaScript would call a PHP function with the current bounds of the map which is represented by two points. It doesn’t matter how you call the function, just find a way. Then, PHP would use these two points to make a MySQL query on your table of points and only return those in the specified bounds back to the JavaScript. Then, the JavaScript would clear the map of markers and then redraw only the ones which are returned by your server (the ones that are currently in bounds).
I would appreciate questions and comments as I go ahead and implement this solution. Maybe someone has already done exactly this and open sourced their code. If so, I would love to hear about it to save me time.
-Kyle Mulka
http://maps.kylemulka.com
Update:
I forgot to discuss the problem of having too many overlays within a given bounds. That is kind of important. Oops. For example, if you are zoomed out all the way, your JavaScript will be handed all of the overlays in the world, and this will not help performance AT ALL for higher zoom levels. So, I’ll outline a general solution to this problem.
You need to organize overlays into groups. Visually, on a map, without knowing anything about the underlying data, I see only one general solution. If anyone has any others, I’d love to listen.
You would have an algorithm which reduces the number of overlays to display by automatically grouping overlays based on location. There are tons of ways to do this. I think the easiest way would be to split up the given bounds into four squares, then check each square to see if there are still to many markers in that square. If a square still has too many markers, simply divide that square into another four squares and count again. All of this information could be calculated ahead of time and stored in a database for painless and fast retrieval when queried. This is almost exactly what Google does with its map tiles. Each zoom level simply divides each tile (a square) into four smaller squares and displays the new four tiles. This is how Google Maps itself is so fast. They can simply save all of these tiles in a database or as image files for absolutely painless retrieval. There is almost no processing required on the server. It is extremely scalable.
Another improvement to this system may be to use the same system that Google uses to keep track of tiles. The tiles are cached on your computer, and when you go one way on a map, then go back, it doesn’t have to query the server for those tiles. It would be nice if you could some how cache the marker information in the browser as well.
-Kyle Mulka
http://maps.kylemulka.com
August 7th, 2005 at 9:31 am
You really should mention addOverlays() here. That hack function solves the most common of overlay loading issues where people are adding upward of 1000-1500 markers on a map.
August 26th, 2005 at 10:51 am
The addOverlays function is now obsolete as Google as improved their addOverlay function’s speed significantly for large number of overlays. But, it is still not instant of course, hense the reason to reduce the number of overlays.