We’re a big fan of using the latest APIs and pushing browser-based technologies to their limits. A recent project required complex Google Maps implementation, so the new version 3 API was the obvious choice. It’s many times faster than the previous version, has location services, and works well on mobile devices (like the iPhone). The project’s mapping functionality proved to be a success; however, it wasn’t without a few technical challenges along the way.
One of the problems with adopting new API’s is that the eco-system of code that interacts and extends it is often very immature as well. Code examples can also be a little sparse, though fortunately Google’s documentation was excellent in this regard. The difficulty is when you need something that’s not included in the box. Our map has markers, a lot of markers, thousands of them in fact, and to stop the browser impaling itself on a spike we needed marker clustering.
Clustering is where you replace several individual markers with a single marker group icon that indicates to the user that there is X number of markers in this location. The more you zoom out, the greater the number of markers grouped into each cluster. The clustering solutions for Google Maps version 2 were numerous, but for version 3 there was just a handful. The most suitable library was barely 3 weeks old, certainly immature, but as a port of a stable release of the same library for the v2 API it was a viable option.
Another problem we faced was that the styling provided by the library was limited. It expected the marker to be centered on the location, rather than above the location as the design needed. Method overrides and a good understanding of cross-browser rendering bugs allowed us to extend the library to meet our – and our client’s – needs.