Part of the startup I'm pursuing involves using the Google Maps API to display a map containing location markers. The number of location markers could exceed 4000 at any given time. I currently have a sample dataset of around 500 and found that the map loading was starting to slow down. I considered several reasons this may be the case including how I was generating the JavaScript on the page using Ruby on Rails. I decided to do a little testing using examples from the Google Maps API Documentation.
I found a wiki reference that discussed marker optimization techniques and tried some of them to see the differences. There are others besides these, so if you are interested visit the link.
- Only Draw the Points in the Area Viewport - Great suggestion, but is only valid when the user zooms in. At the highest level, if all points are displayed then this has no effect.
- Load Different Points at Different Zooms - Another good suggestion. This is accomplished through the use of the GMarkerManager. However, the question remains as to how to breakup your data. Do you provide a generic icon at higher zoom levels and when clicked on it zooms in and displays markers? Do you display “preferred” locations at higher zoom levels (e.g., paying users)? Do you display higher ranking/rated (assuming you have a ranking/rating system) locations at higher zoom levels? For my particular app, I use the GInfoWindow to display information about a particular point. If I don't go with the generic icon approach then I would be giving preferential treatment to some locations and would need to figure out how to justify it. For example, people might not zoom in to reveal other locations and thus the highest zoom level markers would get all the attention. If I did use a generic icon, then the data on my map would not be as impressive because you could only see a few icons until you zoom in. Additionally, it would not be possible to see the locations in relation to each other at higher zoom levels.
- Add HTML to InfoWindows (Bubble) Using Click Event - Yea, I thought about this one too, but found that during my testing without using the InfoWindows it was still slow.
- Preload the marker images - Hmmm… special case for IE? Nah, I say let ‘em suffer.
- Omit the shadows - Those pesky shadows… This actually did seem to make a difference during my testing, but it doesn't look as nice.
So, what to do? I am considering trying a combination of the approaches above as well as delaying the loading of the markers. For example, at the highest zoom level, all markers are visible, so I might wait about half of a second before adding markers. Then when I'm adding, I allow about an eighth of a second between batches, where a batch is 20-25 locations. Instead of using the GMarkerManager at the highest zoom level I would just use addOverlay. This gives the map the appearance of pretty smoothly adding markers to the map. Although it is kinda cool to watch, adding one marker at a time takes too long, so it has to be a few at a time. Not so many that it appears chunky though.
The other techniques that I think might be useful are delaying the InfoWindow data until the onclick event as well as factoring in the viewport area for marker display. Theoretically, this should allow me to load all of the markers with the smallest amount of information possible and increase the performance as the user zooms in.
I really don't like the clustering approach as is tends to obscure the data. Part of what I am trying to accomplish with using Google Maps is to present my data in a way that allows for easy visualization of the points in relation to each other. Clustering seems to defeat that purpose. I also like the shadows because it makes it look nicer. If it comes down to it I will, reluctantly, lose the shadows.
My other options are to disallow viewing all of the locations at once. This might be accomplished by loading an empty map and asking the user to search first. Additionally, I could limit the search results to a few hundred. I'm not keen on this approach, but I may be forced to go this route if I can't improve the performance otherwise. I could also try using an XML file with GDownloadURL, but I can't see that actually being faster.
I had an extremely hard time finding information about Google Maps and performance, including tips, techniques, hacks, etc. If you have any suggestions please post in the comments. It would be very interesting to see how other people are handling this problem.