Experience Matters

Google Maps in (a) Flash!

Yesterday, we posted a new part to Rolex.com: the ability to find a local Authorised Rolex Dealer. This on its own is hardly breaking any new ground — it’s a fairly routine piece of functionality. To help you find your local dealer, we provided a map — a Google Map.

Those of you who know the two technologies are probably now scratching your heads. Google Maps. Flash. Aren’t they incompatible?

Not any more.

Flash is wonderful. I love it and have loved it for years. But Flash on its own has its limitations, especially when we look at the bigger picture of digital marketing. What Flash really brings to the table is experience: a merging of sound, animation, video, and data that creates something you can’t easily do in DHTML. It’s limitations are also well-known: no SEO support, no deeplinking, the browser’s back button doesn’t see what you’re doing, and bookmarking has limited effect. And Google Maps isn’t supported in Flash — it’s an AJAX application.

Most of those other issues we’d already conquered with Rolex.com. When we came to helping you find a dealer, we needed a solution that provided the best global solution, and Google Maps had the best map coverage. It was the lack of Flash support that was a problem.

But we don’t shy away from problems. We love a good challenge!

While our web developers sat down to use the default Google Maps API, we in the Flash team had a problem: how to use the API? Google has developed a powerful tool that covers a lot of ground (no pun intended), but it’s geared to using JavaScript. While JavaScript and ActionScript have a common ancestor, they don’t really cohabitate. Initial prototypes revealed that passing requests back to JavaScript to make a request, then trying to read the returned data were not just ineffective, they were nigh on torture.

We came across one other example, but it required you to use their server to request images (assumedly to support the API key). Dependence on someone else’s system wasn’t an option. We needed a portable solution, so that we could run it on any of our projects. We went back to our mantra: if it’s worth doing, it’s worth doing right. And that meant figuring out just how Google Maps actually works. I have to say — Google has an absolutely elegant and simple solution. Translating them into Flash was a bit tricky:

1. Zoom levels and the map tiles are related. (Think of a search tree, where each deeper level accesses more detailed tiles.)
2. Mercator projection isn’t just something you heard about in 6th grade geography. (While a specific point might dead-accurate up-close, it can shift hundreds of kilometres at the world zoom level.)
3. The Google API uses an API key to validate usage. And you need to use it for almost every request.
4. Reverse engineering in this case does not eliminate the contractual obligations.
5. It’s actually best to use a different map tile loading pattern than the Maps API. (Flash does a better job of loading than AJAX.)

Still with me? (Admittedly, I’m aiming for a slightly different audience with this post than with our other ones.) In the end, we had to effectively develop a Flash interface for Google Maps. It reproduces the core functionality, and allows you to skin it however you need. It integrates correctly with the Maps servers, requiring the API key to work. But it’s light (30k, compiled), fast, customisable…

…and freely available to you.

Thanks very kindly to Rolex, we are releasing the source code for the Google Maps Flash interface to the world. It’s our way of paying back into the open source community that provided some of the code that we used to build Rolex.com. Sadly, the interface is not complete — we only developed what we needed, and did not reproduce the entire API. That said, if you feel the urge to add to the code, we would certainly welcome contributions.

You can find the project (conveniently enough) at Google Code: http://code.google.com/p/google-maps-flash-interface/

Some notes anyone wanting to use this code should be aware of:

• You need an API key to use this — they’re free, so that shouldn’t slow you down
• This code supports only ActionScript 2 (we’ll have an ActionScript 3 version sometime in 2008)
• This is released under the BSD License (in other words, you’re free to do with it as you please, but there’s no direct support)

Happy mapping!