(3 votes)
Loading ...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:
- Zoom levels and the map tiles are related. (Think of a search tree, where each deeper level accesses more detailed tiles.)
- 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.)
- The Google API uses an API key to validate usage. And you need to use it for almost every request.
- Reverse engineering in this case does not eliminate the contractual obligations.
- 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!
Man, that’s a huge work!
Very nice execution…
Thanks, Quentin! It’s not the bees knees yet, but we should get there soon.
Wow 30kb is nothing, but as you said it is great to have something light and powerful, I will certainly try what you guys have done with the gmaps
grettings!
We hope you like it and find it useful! Naturally, if you have any ideas, suggestions, or issues, please let us know! (Google Code is the best place for that information, so it benefits others.)
Man.. this rocks guys…
Always awesome to see great flash developers in Calgary. This is phenomenal!! Where did you find the time at Cmass…. hahaha!!
Jeremy
Why not just use AS3 Modest Maps API? it works great with several different map providers.. including google.
Thanks Jeremy,
It took me a couple of months to figure out how Google was using Mercator’s Projection to draw the maps, but once I got that it was all a matter of hooking up the proper calculations. To respond to Chris, the Rolex site is AS2, not AS3.
Hi,
thanks for the great work! Looking at the source code, I can’t find anything that seems to be related to the API-Key though … where do I reference my API-Key?
This is exactly what I was looking for!
Thanks:)
Are you coming up with AS3 version of this one? if so, any rough dates that you would like to reveal?
Yahoo maps on the other hand for AS3 uses an externalInterface… cuts me down…
Excellent work!
Clearly you’ve developed this some more, comparing the code on Google to the Rolex execution, will you be posting updated code?
If not, can you shed any light on why the map is so dark? I notice the Rolex version is fine…
Thanks
Bruce
I loaded the API key, but can’t figure out how to make it go to my address. Anyone can help? Here it is now. http://www.ehlinelaw.com/maps.html
I have the same problem as Tom Döhler.
Where do I reference my API-Key?
Na minha aplicação aparece o seguinte erro
SecurityError: Error #2070: Security sandbox violation: caller http://maps.googleapis.com/maps/lib/map_1_3.swf cannot access Stage owned by http://www.rarusflats.com.br
Lembrando que ja tenho o crossdomain na base do site
http://www.rarusflats.com.br/crossdomain.xml
Pode me ajudar a resolver isso ?
Did anyone reply to the question about why the map is so dark? It appears as though there is a semi-opaque layer being generated, but I can’t see where this is happening …
@ Kevin Gunning,
Hey Kevin the map is dark because it was tinted for our Rolex project. If you want to change it please look in the library for mapLayer_mc and change the brightness on it.
I hope that answers your question.
What’s that I hear about Google Map, earth, etc. getting spammed? You sure this one’s safe?
Personal Injury Lawyer Los
Angeles
Where can I get the API to add our address?
Hi,
nice work, much time passed but you see component is still in use
is it possible to change view to satellite
I’ve tried adding params for t=k or t=h but seems it does not accept it
do you maybe know where is the problem and if it is possible?
thanks in advance
Alex
Man thanks a lot for this work. I have AS2 restriction and this is the only one in the net! I am curious in one thing, however:Is there any chance to display ’satellite view’ using this component? Thanks again guys
Hi guys, it seems like the component is not working anymore.
Suddenly http://mt2.google.com/mt?n=404&x=13&y=13&zoom=12 is not resolving
Any ideas?
Fixed.
Here is the solution:
http://code.google.com/p/google-maps-flash-interface/issues/detail?id=14
Cheers,
Stephen