Solution to black boxes in Google Earth balloons when the GE plugin is placed over Flex/Flash content

This is very much a post to spare people the hunting I did to solve this very particular problem :).

I am doing some work for a client that integrates Flex and the Google Earth plugin.  This post by Andrew Trice explains the basic integration well (it’s very slick!).

However, there was an issue–in Firefox, any balloons popped up by clicking on a placemark were black.  The text of the balloon was there–you could see it flicker–but not visible.  Andrew references a trick that allows “layering Google Maps HTML/JavaScript over Flex content,” so I suspected that was part of the issue.

Running the same GE code without the Flex component showed the balloons normally, so that was the issue.  A bit of hunting turned up a reference to the wmode parameter being important to such layering (I had a URL, but have lost it.)  Then, this post popped up, explaining what the proper settings for wmode were.

Basically, if you are seeing black balloons in Firefox when you are placing the GE plugin over Flash, you need to set the wmode to opaque.

[tags]flash,flex,google earth, flex-google earth integration[/tags]