« Smooth Route Animation in Google Maps: panTo vs. setCenter
Full screen route maps with elevations »

How to overlay a Flex control on Google Maps

Overlay Flex ControlYou can add a Flex control to a Google Map by taking advantage of DHTML DIVs and z-order tags. Here I’ve defined a Flex control to display the elevation chart associated with a route. In Flex, I specify the opacity of to be 0.5, this means that the chart will be partially transparent. The z-order of the Flex div ought to be higher than the z-order of the Google Map DIV. Here are a few example of the Flex elevation chart control in action: Sheldon Road Trail, Kennedy/Shannon Trail, Pebble Beach bike route, & Los Gatos to San Jose bike route.

Adding the power of Flex to Google Map gives you to option of selecting the best tools for designing a rich user experience.

Possibly related posts: (automatically generated)

This entry was posted on November 27, 2007 at 6:20 am and is filed under Flex, Google, Maps, Programming. 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.

6 Responses to “How to overlay a Flex control on Google Maps”

  1. Adrian Says:
    December 7, 2007 at 11:46 pm

    I for one would like to say - this is BRILLIANT stuff sir. Well done!

  2. sj Says:
    December 8, 2007 at 3:18 am

    Thank you Adrian, glad that you liked it. The entire soure code is also available just in case anyone is interested. Please see the note19 project. Here is the more updated version of the Flex overlay showing the elevation chart in terms of distance.

  3. B. the biker Says:
    January 2, 2008 at 9:07 pm

    This is really great stuff! I have a website in Holland with a lot of movies of the current mtb-tracks (in case you don’t understand dutch ;-) here is a direct link to the interactive map with the tracks(http://mtb.routefilms.nl/index_flash_vast.html).

    I want to boost the look-and-feel of my website (and thus put it in Flex ;-) and one of the things which can help me with that is the note19 project. Can I use it to display the mtb tracks in Holland? Again, great stuff!

  4. sj Says:
    January 2, 2008 at 11:38 pm

    Hello B. Thank you for your comment. Sure please go ahead and use the code. If you wish to contribute to it and thus make it better, let me know. Help is always welcome. BTW. Cool site that you’ve set up! Can you recommend a webcam that I could use when I go riding? I’ve always wanted to do that.

  5. Elevation Chart in Flex with Google Maps « n o t e 1 9 . c o m Says:
    January 3, 2008 at 1:07 am

    [...] Map in a Flex control. You can also overlay a Flex control on top of DHTML based Google map. Click here for [...]

  6. B. the biker Says:
    January 3, 2008 at 1:50 pm

    Hi SJ, thanks! I will let you know when I have something ready to put online. The camera I use I buy on a dutch website (but they have also translated their site: http://www.x-sportscam.nl/sjablonen/48/infotype/webpage/view.asp?objectID=521

    I’m sure that he imports the cameras from the US and that they are much cheaper over there ;-)

    I have the 420. the quality is not that good (when watching the movie on TV it is quit okay, but on a monitor their are a lot of artefacts.) Nevertheless I prefer a bulletcam because of the weight and comfort issue with other cameras (see also: http://www.petefagerlin.com/index.html). furthermore they now have very cool new stuff (e.g. a complete package with remote control). Maybe my next camera, for now I just use my 420 with a batterypack and the Archos 400.

Leave a Reply