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 wmode="transparent" option when the Flash object is embedded in the HTML page. The code for this example is here.
Click here to see this Flex/HTML integration in action. See also this blog entry.
Here is the reverse idea: embedding Flash on top of Google Maps. This is a useful way of enhancing Google maps.
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?
July 13, 2008 at 2:39 am |
Hello,
I am pretty new to flex and wanted to know how I can import or use the source files for this tutorial into Flex? Any ideas, I would really appreciate it.
Titus
July 15, 2008 at 3:51 pm |
Hello Titus, you can use subversion to get the Flex project sources from “svn checkout http://note19.googlecode.com/svn/trunk/flex-map note19-read-only”. Once you have the sources local, you can use Flex builder to import the project.
August 13, 2008 at 6:46 pm |
[...] flex 能和 google map 融為一體能做出什麼東西來： http://note19.com/2007/11/22/how-to-embed-google-map-in-flex/ http://chidester.wordpress.com/2007/05/02/flex-google-maps-flickr-youtube-gps/ [...]
September 26, 2008 at 11:19 pm |
Hi,
I am a flex beginner. I created a simple Flex app which read the RSS. Now, I want to embed an html object (not swf) into my flex app. How can I do this?
Also, I went thru the map2.mxml code but wasn’t able to figure out how the google map url is being passed from and where is it?
Can u pls help me out?
I actually want to insert a 3rd party chatting widget into my site.
http://www.chatango.com allows you to paste the chatting object into your website. now how would I do it in a flex app? It is pretty straightforward in an html page.
October 8, 2008 at 9:16 pm |
Hi,
View the HTML source of http://javey.net/flex/map2/bin/map2.html
You’ll find the URL to google map in the HTML source.
December 3, 2008 at 10:15 am |
Hai SJ u have done great job, i had tried ur example but i not able to see the accordion , i just able to see the google div, can u plz help me.
December 3, 2008 at 5:24 pm |
Hi Sagar, I’m afraid that this could be due to platform/version differences. Which browser, OS, Flash runtime version are you on? I’ve only tried it on Mac and Windows. There are known issues with this approach on Linux, e.g. see links in earlier comments.