|
|
As a stepping stone to porting Google Maps to Flex I've taken the approach of placing the maps on top of Flex. This is done through the use of a transparent background approach where the background of the Flash movie is made to let anything underneath it show through. This is done by setting a parameter called wmode to transparent. You can see the results in the image below.
What's happening here is that the map div layer is actually getting rendered on top of the Flash movie. Therefore, it gives the appearance that the map is actually inside of Flex. From an end user standpoint you can't really tell the difference. From a development standpoint you can make JavaScript calls to communicate between Flash and the map object. This is a little extra work, but serves the purpose of what I'm trying to do initially.
I'm confident that the port of Google Maps to Flex will happen whether it's by me, somebody else, or Google themselves. I know the last option sounds crazy, but Google did recently switch all their on-line video content to Flash. Flash video is tough to beat. I can envision a truly rich mapping application with video and push technology where data arrives and is displayed automatically on the map without polling or refreshing. Map sharing could even be implemented.
With all this being said, let me get back to the point. Taking the div approach provides a seamless experience for the user. Events in Flex are broadcasted to the map div and vice versa. If you look at the following example
http://www.db75.com/dev/gmaps/flex_gmaps4.htm
You'll notice that clicking on a point in the map selects a record in the table beneath it. These are two completely different environments, one DHTML and one Flash. They communicate with each other through JavaScript calls. When a record is selected in the table the appropriate location on the map is centered in the view. One very cool thing about this is that you can use your up/down arrow keys to move through the table and watch the different points pan into view. All this functionality comes standard with the Flex DataGrid control and a simple change event is responsible for calling the JavaScript that centers the map.
You can even drag the horizontal divider and the map will resize appropriately. This is done again by broadcasting an event from Flex to the map div. This functionality is a bit quirky and needs some work since the map doesn't resize until the mouse is released. There is no feedback given to the user when they're dragging and if you drag upwards the map actually covers the divider.
The other key point I'd like to mention is to make sure that your div layer is placed after your Flash object/embed code. The browser renders this code from the top down so you want the map to be rendered on top of the Flash movie. I experienced some crazy results when placing the map div before the Flash code. View the source of the link above if you need an example.
With all this being said I think there's enormous potential with integrating Google Maps and Flex. Although this isn't "true" integration it does provide a tightly integrated experience for the end user. Please feel free to contact me if you have any questions about this implementation. It's very straight-forward and appears to be a viable solution (unless you're in Safari and that's a different story).