How to embed Google Maps in Flex
Create your Flex application as you would normally do, design the UI and set aside a rectangle in which you wish to display Google Maps. In the HTML wrapper for the Flex application, add a DIV for the Google map, and add JavaScript functions to show or hide this DIV. These functions will be called from Flex when you need to show or hide the map. In this example, I’ve added the Google map to a Flex Accordion control. The map is shown when you click on the tab “Google Map” and is hidden when you click on the other tabs. The trick to get this to work is to use the Flash The code for this example is here.wmode="transparent" option when the Flash object is embedded in the HTML page.
Click here to see this Flex/HTML integration in action. See also this blog entry. Another item of note is that when you click on the tabs and then click on the browser BACK button, the Accordion control / browser does the right thing, i.e. you go to the previous views. I didn’t do anything to enable this. Flash/Flex must have fixed this. Very nice!
November 22, 2007 at 5:09 pm
Good and simple article. Nice to understand. Thanks for it.
November 22, 2007 at 11:50 pm
Note19. Nice. There has been a bit of work already on embedding html (and of course maps) into Flex apps. Plough your own furrow by all means but have a look at the demos here:
flexTraffic:
http://ccgi.arutherford.plus.com/website/flexTraffic/
Html Demos:
http://ccgi.arutherford.plus.com/blog/wordpress/?page_id=132
A bit more complicated I will agree. Your demo looks more straightforward.
Al.
November 23, 2007 at 10:47 am
Ehm… this will not work when you use the back button.
November 23, 2007 at 3:34 pm
The back button seems to work in Firefox on the Mac. I’ve not tested other browsers/OS for this.
November 25, 2007 at 10:25 pm
[...] How to embed Google Maps in Flex « n o t e 1 9 . c o m (tags: flex googlemaps) [...]
November 26, 2007 at 4:17 am
wmode is not well support across multiple platforms, eg. Your example fails to work under Linux using Flash Player 9.0 r48
November 27, 2007 at 6:44 pm
I checked the example on Linux and as you mentioned it is not working. It appears that wmode parameters was actually not the reason why this technique was working on other platforms. I believe that default z-ordering was why it worked in the first place. I’ve updated the example by explicitly adding the z-order tag to the DIVs. It works on Windows and Mac but not on Linux. On Linux it appears that the transparent attribute of Flex controls and the z-ordering of the Flash DIV is ignored (on Linux Flash content appears on top of HTML and cannot be made transparent; hopefully future versions of Flash Player will address this limitation). For instance, my latest example to overlay Flex on top of Google Maps works in Windows and Mac. But on Linux the Flex control is fully opaque instead of being semi transparent. If you want a cross platform way of embedding Google Maps (or HTML) in Flex, for now you’ve to use IFrames (see Alisters’s excellent disposition on this) — it appears that the IFrames will reliably appear on TOP of the Flex app thus satisfying the z-ordering requirements for all platforms.
February 14, 2008 at 10:34 pm
It´s very cool. Because If you use a flex component google can deny access for you tile. Google support only JAVASCRIPT…
March 18, 2008 at 5:42 pm
well, thanks for this exemple
but i still have a problem with it .. in fact iy doesn’t works as it would be .
when i click on google map the map is displayed in a new web page
i dont know may be i made a mistake somewhere.
please if you can help me it would be great
if you have an url wich explane more what you did in the source code i’ll be thankful .
April 7, 2008 at 6:07 pm
Wow, excellent work. Kudos!
We have multiple re-uses of our state map in mind (one for workforce development; one for hurricane evac. response), and the accordion effect would be great.
April 9, 2008 at 12:34 am
I’m actually facing the same problem as ss is: I only see the map and not the Flex UI.
I’ve checked on the Internet some stuffs with z-index and wmode “transparent” but it hasn’t changed anything.
Could someone help us pleeeaaaase?