Creative Google maps III: Clusters and info windows

There are two client side problems with having lots of markers on a map. (Server side issues were discussed in the last article.) One, they can be hard to distinguish from each other if they're too densely distributed, and two, the burden on part of the browser to render a large number of markers at the same time can make a map really slow. The second problem of course gets worse on a slow machine, and it can be really bad if the browser also happens to spell "IE".

Lumping markers together

Both these problems can be helped by using clusters, that is, grouped markers representing a number of individual markers. There are several implementations of this idea. Google provides its MarkerManager as a solution to this problem, but there are better and faster methods out there, all provided as readymade add-ons to the Google Maps API. There is a brilliant article comparing some of the best ones – with performance tests – written by Gabriel Svennerberg.

The Gmap module described before has built-in support for MarkerManager and Clusterer2. However, we ended up using MarkerClusterer as it proved to have great performance and also because it displays the number of grouped markers per cluster and lets you customize them in a nice way. Since we were already adding markers to the map with custom JS code (rather than using something like Gmap) we could easily incorporate this library in the process. MarkerClusterer's docs has a couple of examples of how this is done.

Customized info windows

Performance isn't everything however. There are lots of other add-ons to the Google Maps API, and some of them are just meant to make things look decent, nothing else. Extinfowindow is a class that gives you an alternative to Google's native GInfoWindow. (Info windows are the bubbles that appear when you click on a marker on a Google map.) We used Extinfowindow to be able to implement a custom design for these windows. Again, this was only possible since we were using custom JS code for the map. No map modules in Drupal that we know of let you do this at the moment.

The examples page will tell you how Extinfowindow works, and this demo shows you the amazing variaty of styles you can achieve with this library.

Conclusion

This article has discussed a couple of add-ons for the Google Maps API that make maps look and behave better. These are a great testament to how powerful and flexible this API and web service actually is. We were able to build a beautiful dynamic map, customized to our needs, with relative ease.

One could wish for better support for these add-ons in the mapping modules available for Drupal. There doesn't seem to be any support for MarkerClusterer at the moment, but there is at least an issue for having Extinfowindow included in Gmap. On the other hand, we are happy that we were able to achieve so much with existing solutions, and only a limited amount of code, in a project as unique as this one.