I received an email on Friday, March 27 about the Dice Programming Challenge.  (My inbox shows that I received the same email on the 19th, but I must have missed it.)  Anyway, the email stated “Show off your web-based application skills! Build a Google Maps mashup and you could win $4,000.”  I had used the Yahoo! maps Flash component before, but I had never used Google Maps in an application.  The contest deadline was March 31.  On Saturday morning, I decided to put my whole weekend into creating an entry for the contest using Flex.

I first read about Google’s searchmash site in a blog post at RIApedia. I had used an iframe before inside of a Flex application, but what I was really impressed with was how Google got Flex content to appear on top of their maps (notice the More combobox at the top and the Recent Searches slideout on the left.)  Previously I had always had to hide the iframe when showing an alert or popup window.

I used Firebug to peak at what they were doing.  For starters, they were using wmode = transparent. But the real trick was they were changing the z-index of the iframe from 300 to 100 whenever the Flex content needed to appear on top of the map. The flash stays at a z-index of 200, and as you know, containers with the higher z-index appear on top of containers with a lower z-index.

With that knowledge, I put together this application.

The contest finalists won’t be announced until a few weeks and then dice members get to vote for the winner.

I had to overcome a few challenges in the three days I had to get my entry finished, so I thought I would document them here.

The first problem was my Flex application could not get the Geocoding data from Google using an HTTPService.  The problem was that Google did not have the necessary crossdomain.xml file in place. I found a solution on the web - use PHP to create a proxy on your server with curl. Then specify the url of the HTTPService as the proxy php file. The proxy just passes the XML from Google to the flash file.

Another obstacle was that Internet Explorer 7 (running under Parallels) would, about half the time, not show the Google map in the iframe.  Firefox 3 would display it fine every time. What was going on?  I had used this component for handling the iframe. You specify the url for the iframe in Flex and it passes it to the wrapper.  Apparently, that was a problem for how I had used Google maps.  When I hardcoded the url for the iframe in the wrapper, the problem in IE7 went away. With a deadline fast approaching, I didn’t dig too deep to find a more robust solution.

With just a few hours before midnight on March 31, I tested the application in Firefox 2 on Windows. And that is when a huge bug surfaced. The Flex application in Firefox on Windows would not respond to any mouse click that appeared over the iframe! A user could not get past the introductory popup message.

After doing several searches, I found a blog post that mentioned the issue. They had discovered that their flash movie does actually respond to the mouse click, but that the hit area is way off.  Sure enough, when I clicked about 50 pixels south of the button, it responded.

The solution that worked for me evolved from this comment. I created a secondary iframe with a width and height of 100%, a position of absolute, and a z-index of 101.

Update 5/15/2008: Good news! The need for all this iframe z-index trickery is obsolete now.  Google just released their Google Maps API for Flash.

This entry was posted on Friday, April 11th, 2008 at 11:16 am and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.