Timeshifting Interactive Blog
Web API’s and browser technologies
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.
This is where the having a strong knowledge of the language and the browsers you are working with is really helpful. The library definitely had a few bugs, but having come from a time before JavaScript libraries it was easy to write override methods to patch these until library author corrected them. In between the initial implementation and project release the library authors did in fact patch those issues, so we were able to drop in the latest code and dispense with these patches.
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.
I still wonder if too many new programmers now rely too heavily on JavaScript libraries, without understanding how things work behind the scenes. Every browser will always have its quirks and a professional front end developer should know how to deal with these. I’m not advocating against using JavaScript libraries, as they definitely get projects out faster and reduce costs. But if things don’t work correctly, or if they require slightly different functionality, I wonder whether many programmers would cope without their jQuery fix.