Google Maps Collaboration Using Google's New ActionScript API, Flex, and BlazeDS


Google recently released the Google Maps API for Flash. I took the opportunity to create a Google version of the MapRooms sample application I posted recently. MapRooms works like Chat Rooms. You can create a room, or join an existing one. In addition to chatting, MapRooms allows you to collaborate on a map: the application leverages the real time capabilities of BlazeDS or LCDS to provide map synchronization between users in the room, and allow you to “whiteboard” on top of a map.

Testing the hosted version

Disclaimer: I’m currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don’t know much about the characteristics of my server, but I’m probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I’m investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in “Local installation instructions”). The hosted version tries to connect using RTMP by default (available only as part of LCDS) and falls back to “long AMF polling” or regular AMF polling if the RTMP connection fails.

  1. Access http://coenraets.org/apps/gmaprooms/gmaprooms.html on two different machines or in two browser windows on the same machine.
  2. Make sure you logon with two different user names and the same room name.
  3. Move the map in one browser and notice that the position of the map is synchronized in the other browser.
  4. You can also search an address in one browser and the resulting map position will appear in the two browsers.
  5. The zoom level and the map type are also synchronized between users.
  6. Click the “Whiteboard” button in one browser, pick a color to draw on the map (upper left corner), and start drawing.

Note: you can right-click the application and select View Source or click here to see the source code of the application.

Local installation instructions:

  1. Install BlazeDS. You can download the BlazeDS turnkey server (a version of Tomcat with BlazeDS preinstalled) here.
  2. Open {blazeds-install-dir}/tomcat/webapps/samples/WEB-INF/flex/services-config.xml and add an AMF long polling channel defined as follows:

    <channel-definition id="my-longpolling-amf" class="mx.messaging.channels.AMFChannel">
    	<endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amflongpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    	<properties>
    		<polling-enabled>true</polling-enabled>
    		<polling-interval-seconds>5</polling-interval-seconds>
    		<wait-interval-millis>60000</wait-interval-millis>
    		<client-wait-interval-millis>1</client-wait-interval-millis>
    		<max-waiting-poll-requests>200</max-waiting-poll-requests>
    	</properties>
    </channel-definition>
    

  3. Open WEB-INF/messaging-config.xml and add the following destination:

    <destination id="gmaprooms">
    	<properties>
    		<server>
    			<allow-subtopics>true</allow-subtopics>
    			<subtopic-separator>.</subtopic-separator>
    		</server>
    	</properties>
    	<channels>
    		<channel ref="my-longpolling-amf"/>
    		<channel ref="my-polling-amf"/>
    	</channels>
    </destination>
    

  4. (Re)start the BlazeDS turnkey server.
  5. Download the source code of the Google Maps Application here.
  6. Create a Flex Builder project for the Flex application (gmaprooms). Make sure you configure your Flex Builder project to work with BlazeDS. To read instructions on how to set up a Flex Builder project that works with BlazeDS, make sure your BlazeDS turnkey server is started, and click here.
  7. Download the Google Maps ActionScript 3 API here, and add the swc file in the libs folder of your project.
  8. Get a Google Maps API key and assign it to map.key in the initMap() function in MapArea.mxml.
  9. Compile the application.
  10. Open the Flex application in two browser windows (to simulate two users in different locations) and test the application as described above (in “Testing the hosted version”).



123 Responses to Google Maps Collaboration Using Google's New ActionScript API, Flex, and BlazeDS

  1. Craig May 23, 2008 at 6:11 pm #

    Way to go!

  2. Kenneth May 23, 2008 at 11:42 pm #

    This is so cool!

  3. Mingo May 25, 2008 at 11:03 pm #

    WOW !!! I love you , Christophe , really great Applications !!!

  4. Mingo May 25, 2008 at 11:46 pm #

    it seems slow,very slow, i don’t know why ?

  5. christophe May 26, 2008 at 6:12 am #

    Mingo, I’m currently hosting the application on the server I use to host this blog (basic PHP and Tomcat hosting plan). I don’t know much about the characteristics of my server, but I’m probably sharing it with a few dozens of other domains and the resources allocated to me are obviously limited in that shared environment. This is clearly not the ideal environment to host a potentially large scale real time application and I’m investigating other hosting solutions. In the meantime, if you experience difficulties running the app, you can install it locally using the instructions provided below (in “Local installation instructions”).

  6. Pamela Fox May 26, 2008 at 1:03 pm #

    This is ridiculously cool. The one thing I would say is that it’s not clear the difference between the “Shared map” and the “whiteboard” map.

    Also noticed that if I geocode after drawing, the drawing travels with me.

  7. Abhijeet June 21, 2008 at 2:02 pm #

    That’s really looking cool, need to try it asap. Most probably tomorrow, feeling sleepy now.

  8. Kevin June 27, 2008 at 3:24 pm #

    Please keep us updated with regard to your search for a good hosting environment. I’ve done a little googling and found only one webhost that advertises BlazeDS… Isn’t that the reason Adobe released BlazeDS? So web hosts would offer it as part of hosting solutions? I mean developers already have LCDS ES for development… ya know…

  9. Stefan Richter July 8, 2008 at 3:52 am #

    Hi Christophe,
    I’ve ported your app to run on FMS/Wowza/Red5: http://www.flashcomguru.com/index.cfm/2008/7/7/map-rooms-ported

    Best wishes,

    Stefan

  10. Jan August 1, 2008 at 8:03 am #

    Hi Christophe,

    can you please post tha Java-Files for the Backend of this Application? This would help me to understand the communication between front- and back-end.

    Thanks
    Jan

  11. Heath Brown August 6, 2008 at 3:41 pm #

    I really love your application look and feel. Where can I go to learn how to do that with Flex and AIR?

    I’ve got my setting for chrome to “none” but I still get standard borders and title bars from a windows application. How do I make it borderless like your cool looking apps?

  12. Araba, Yarış Oyunları August 6, 2008 at 5:48 pm #

    Güzel bilgiler…Teşekkürler…

  13. Christina August 27, 2008 at 3:13 pm #

    Hi Christophe,

    I am trying to set up blazeDS on a remote server, and I am not sure how to configure the compiler (-services) and server settings (root folder) to make it work. I would appreciate any pointers you can give me. Thanks a lot!

    Christina

  14. Billigflug Kuba August 28, 2008 at 10:10 am #

    Hi Christophe,

    this sounds to be a awesome Application.
    Is it possible to release a “just click an run for stupid users like me” version?

  15. Cargo Freight Exchange September 8, 2008 at 8:33 am #

    Thank you for great information.

  16. Sreekanth September 10, 2008 at 9:41 am #

    Hi Christhope,

    This is really nice application.

  17. Pamela Fox September 25, 2008 at 12:28 pm #

    Hey there–

    This is awesome. Would you be amenable to having it linked from the Maps API documentation?

    - pamela

  18. Cornflake October 22, 2008 at 9:49 pm #

    That’s funny… The area I live in looks almost exactly like that. Street name is Canal St. instead Channel. :)

  19. Asha November 13, 2008 at 4:36 pm #

    This is a great application. We are exploring the possibility of building something like this for our business. Are you available for phone consultation to guide us with the architecture and technology.

  20. Bing November 27, 2008 at 7:51 pm #

    Hi,Christophe

    This application can be sync now. Can you fixed it? Because I want to demo it for others. Thanks.

  21. Flug Brasilien March 10, 2009 at 5:44 pm #

    Perfect application, I love google maps

  22. Gummistiefel May 28, 2009 at 9:14 pm #

    I’m not a developer and some of the discussion I had with MapQuest was too technical for me to entirely understand the full range of advantages of the new API. But, as mentioned, it appears to permit a new, richer generation of mashups to be born on using Flash and other Adobe platform tools.

  23. Thomas , Zauberer Zauberkünstler May 30, 2009 at 5:08 am #

    Hi there,
    I found great ideas on your Web site.
    Well done !
    Thanks for that and keep on doing
    Greetings from germany
    Thomas

  24. Sriram June 28, 2009 at 8:05 pm #

    Hi..

    I tried the local installation instructions. the front-end login page loaded, but after that the page did not load…i tried multiple times, but faced the same issue. Any solution?

  25. Laura W July 4, 2009 at 2:47 pm #

    I’m very impressed by this application. Any thoughts on making the free hand drawing geo-referenced?

  26. Gummistiefel July 15, 2009 at 8:47 pm #

    Here is a tutorial to show how to install and use the MaxMind Database with PHP scripts examples. And it also shows how to display it on a map (Yahoo! Map) (french):
    http://www.flex-tutorial.fr/2009/02/01/flex-yahoo-maps-api-geo-localisation-par-ip-dun-visiteur-exemple/

  27. Henike99@girlsandnylons July 17, 2009 at 9:26 am #

    That’s good information: Om said Om don’t know much about the characteristics of his or her server but I’m probably sharing it with a few dozens of other domains and the resources allocated to him or her are obviously limited in that shared environment.

  28. matifbutt August 11, 2009 at 11:48 pm #

    Hi I dont know, my first client browser working okay with second one but when I reply from second client to first, its not working.

    Any idea

  29. matifbutt August 12, 2009 at 12:32 am #

    Client one get the reply but slowly from Client 2. Is there any reason?

  30. activetraffic.de August 18, 2009 at 5:19 am #

    nice one! But I still have the problem, that the API-Key is not working with Subdomains! I have to register new Keys for each Sub! Anyone any solutions?

  31. Marco Pe August 18, 2009 at 7:26 am #

    Hi activetraffic: I think that you have to stick with registering each subdomain – unless there is some sort of script to automate the process? Regards, Marco

  32. Руслан Гаврилов August 20, 2009 at 3:32 am #

    Вопрос к автору сайта, а вот у вас время у каждой статьи и в комментах пишется… Это какое? Московское? Заранее спасибо за ответ.

  33. Office & Büro August 20, 2009 at 3:49 am #

    has anyone any more informations on this “subdomain-issue”? because I´m facing the same problem!

    Best Regards
    Nico

  34. xtcommerce templates August 23, 2009 at 1:55 pm #

    This is so cool! woow great Idea

  35. برنامج خواطر 5 September 5, 2009 at 10:56 pm #

    Hi activetraffic: I think that you have to stick with registering each subdomain – unless there is some sort of script to automate the process? Regards, :)

  36. Don September 16, 2009 at 12:21 pm #

    Communication between rooms does not seem to be working at the moment

  37. seoflatrate.net September 21, 2009 at 2:06 pm #

    I found the idea Wunderfull! Its nice

  38. Mike October 6, 2009 at 12:06 pm #

    wow great!

  39. Ecommerce Templates October 11, 2009 at 5:34 pm #

    Would you be able to having it linked from the Maps API documentation?

  40. sgd October 15, 2009 at 1:39 pm #

    I am using G Maps with Ruby on Rails and it works fine, now I will try it with flash and flex.

  41. Zauberer October 25, 2009 at 5:34 pm #

    I love google maps on the iphone – but no flash is possible on the iphone

  42. Außenwerbung October 26, 2009 at 12:40 pm #

    Flash will probably never go to the iphone.
    But its not needed anyway.
    Nice article and thanks for sharing :)
    Greetings, Außenwerbung

  43. Etikettendrucker November 2, 2009 at 11:05 am #

    I tried the tutorial, great help. Thanks!

  44. Alleinunterhalter Köln November 30, 2009 at 6:07 am #

    wow, the tutorial actually helped me alot.
    thank you :)

  45. Zauberer Hamburg November 30, 2009 at 3:53 pm #

    Whow! i have to try this very soon. brilliant idea!

  46. giydirme oyunları December 4, 2009 at 6:35 am #

    thats awesome. thanks..

  47. Haarentfernung December 8, 2009 at 7:25 am #

    Thank you for the helpfull apllication!

  48. Peet December 12, 2009 at 10:07 am #

    Nice article! Thanks

  49. Volker December 17, 2009 at 1:22 pm #

    Ein Kompliment für diese tolle Seite.
    Eigentlich bin ich durch Zufall darauf gestoßen und dachte mir,
    einen netten Eintrag und viele Grüße zu hinterlassen.
    _____ \\\!!!///____
    ______( ô ô )_____
    ___ooO-(_)-Ooo___
    Vielleicht schauen sie mal auf meiner Homepage vorbei!

  50. ehliyet soruları December 27, 2009 at 5:58 pm #

    Whow! i have to try this very soon. brilliant idea

  51. ibrahim saraçoğlu January 6, 2010 at 12:02 pm #

    Nice article! Thank you.

  52. Hardware January 10, 2010 at 12:52 am #

    I use BlazeDS to create exceptional rich applications with Flex and Java BlazeDS is a popular, open source web application that can successfully be deployed into a Java application server, making it an ideal option for Flex and Java integration. With this comprehensive resource, you’ll walk through the process of creating Rich Internet Applications (RIA) using BlazeDS. After a look at BlazeDS basics, the book then moves on to explain how to configure, customize, and extend BlazeDS in order to integrate with new and existing Java data sources and applications with Flex-based RIA. * Explains how to install BlazeDS from source as well as its compiled distributions * Demonstrates ways to make user interfaces engaging and effective * Introduces techniques for intercepting for control and management

  53. Poonam January 27, 2010 at 1:03 am #

    Hello,

    I have followed the steps to create the sample application of Google Map whiteboard , but I am getting the following error message when I click in “Join Room”

    [MessagingError message='Destination 'gmaprooms' either does not exist or the destination has no channels defined (and the application does not define any default channels.)']

    Can you please help me in sorting out this please?

    Thanks
    Poonam Jaju
    poonam.mantri@gmail.com

  54. Krankenversicherung February 12, 2010 at 9:45 am #

    Great article! Thank you for posting. Best Regards from Germany :-)

  55. Netyu March 11, 2010 at 6:39 am #

    Great article :-) Thank you for posting and best regards!!!

  56. Rechnung schreiben April 17, 2010 at 12:22 pm #

    Great site, very interesting. Thanks

  57. Keyton Massagesessel June 15, 2010 at 11:24 am #

    Very helpful website. Wish I would have found this good one earlier. Just bookmarked…
    Shiatsu Massagesessel

  58. Vinothek August 2, 2010 at 7:02 am #

    nicely explained. thanks for the mini-tutorial

  59. Apply Gift August 14, 2010 at 1:53 pm #

    Powerful post.

  60. Poster September 24, 2010 at 5:31 pm #

    good old google is taking over :D

  61. sürücü kursu October 6, 2010 at 7:28 pm #

    Wish I would have found this good one earlier, very nice

  62. Lebensversicherung October 14, 2010 at 11:00 am #

    Great article! Thank you for posting. Best Regards from Germany :-)

  63. Haartransplantation November 14, 2010 at 12:54 pm #

    I read your article and thank you very much. I like it!

  64. Bootszubehör November 17, 2010 at 2:30 pm #

    Great article, I like it. Thanks

  65. Zauberkünstler Schwe December 9, 2010 at 2:48 pm #

    Thanks for all the advice. Google rules… Sad but true. We got to play by the rules of the game.

  66. Zaubershop December 9, 2010 at 2:49 pm #

    Well well, that’s the way time goes. Great post.

  67. Peter Leonhard December 15, 2010 at 10:01 am #

    Fantastic and thank you very much

  68. Frieden December 23, 2010 at 10:00 am #

    Very interesting. Since there’s such a thing as maps from google, I only calculate distances with it. I don’t use any other tools anymore.

  69. Zauberer January 1, 2011 at 4:35 am #

    Good article! I like it and will pass on recommendations for it!

  70. Zauberer, Spaßkellner und Bauchredner January 14, 2011 at 4:20 am #

    Thank you very much for your energy, worg . I founf your article with google and i like it!

  71. ehliyet January 30, 2011 at 4:24 am #

    The information will be useful to us in a nice sharing.

  72. konteyner February 2, 2011 at 2:51 am #

    its very nice and amazing project.

  73. M. Özgür, Türkei February 3, 2011 at 6:30 pm #

    Thank you for the useful information and article!

    • Adam Kailiponi February 10, 2013 at 7:16 pm #

      you are my aspiration , I own few blogs and infrequently run out from to brand : (.

  74. çiçek February 16, 2011 at 5:24 am #

    Thanks you very much! Wonderful newletter!

  75. Zauberer NRW March 27, 2011 at 4:24 pm #

    Very nice article. I like it. thank you so much.

  76. Close-up-Zauberer March 27, 2011 at 4:25 pm #

    Wish I would have found these article sooner. Very Nice!

  77. Haarentfernung April 15, 2011 at 1:42 pm #

    Great site, very interetsing for me.

  78. Rechnung erstellen June 21, 2011 at 2:09 pm #

    Great site, very interesting and useful for me.

  79. konteyner August 11, 2011 at 2:52 am #

    I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here regularly. I am quite certain I’ll learn many new stuff right here! Good luck for the next!

  80. poyraz August 18, 2011 at 9:32 pm #

    Güvenlik Hizmetleri Kamera Alarm Sistemleri

    Güvenlik Hizmetleri | Özel Güvenlik | Kamera ve Alarm Sistemleri

    • Mervin Scardina February 10, 2013 at 12:34 pm #

      I conceive this web site contains some real great information for everyone : D.

  81. Luft wasser Wärmepumpe September 15, 2011 at 6:14 pm #

    thanks for the mini-tutorial

  82. Cleta Neumann October 8, 2011 at 10:23 pm #

    thanks

  83. alpejskie narciarstwo October 20, 2011 at 8:51 am #

    I would like to express my appreciation to the writer just for rescuing me from this type of challenge. Because of surfing around through the the web and coming across opinions which were not helpful, I believed my entire life was gone. Living without the solutions to the difficulties you have solved as a result of your good website is a crucial case, and the ones that would have badly damaged my career if I hadn’t encountered your web blog. Your personal ability and kindness in maneuvering all areas was precious. I’m not sure what I would’ve done if I had not come across such a solution like this. I am able to at this time relish my future. Thank you so much for this impressive and result oriented help. I won’t be reluctant to propose your web site to any individual who should get tips on this subject.

  84. Vitamine January 25, 2012 at 2:11 pm #

    I got what I was looking for. Thank you for this amazing post.

  85. Haarentfernungsgeräte March 1, 2012 at 6:56 pm #

    Great site, very interesting for me.

  86. Almtor August 7, 2012 at 6:01 pm #

    Great site, very interesting for me.

  87. Jan Formann September 29, 2012 at 11:24 am #

    Good Information as I use Maps a lot also for my memory

  88. Finanzberater October 27, 2012 at 8:13 pm #

    For my work very helpful! Thanx!

  89. Illusionist December 7, 2012 at 2:57 pm #

    It works fine on my smartphone. Great tool.

  90. Heinz December 30, 2012 at 3:27 pm #

    Was für eine Erleichterung! Wenn ich an die alten Karten denke…

  91. Sessel Steven January 15, 2013 at 4:35 pm #

    OMG – excellent idea!

  92. monster energy hats for sale January 22, 2013 at 6:51 pm #

    We meddle more in the marketing of our portfolio companies than any other area. … her write-up of the talk

  93. sexy girl dress up games January 23, 2013 at 2:49 am #

    I am currently teaching a class and part of the curriculum involves this subject matter. Do you have any other posts I can look at regarding this?

  94. Umzug January 24, 2013 at 6:52 pm #

    Interesting. I like your efforts and what you came up with.
    Thanks to the developpers.

  95. tasimacilik February 13, 2013 at 1:06 pm #

    Very nice article. I like it. thank you so much.

  96. konteynerler February 23, 2013 at 6:01 pm #

    İt has helped to me so much

  97. Stuttgart Zauberer March 7, 2013 at 8:38 am #

    Great article! Thank you for posting. Best Regards from Germany

  98. Araba iş makineleri operatörlük kursu March 9, 2013 at 1:41 pm #

    Thanks for sharing a very useful article.

  99. coronado May 25, 2013 at 5:09 pm #

    Hi to all, how is all, I think every one is getting more from this web site,
    and your views are nice in favor of new people.

  100. Close-up Zauberer May 28, 2013 at 2:50 pm #

    Thank you very much for this brilliant Artikel. Very interesting.

  101. Zauberer June 7, 2013 at 3:49 pm #

    Wow, great!

  102. Tamela July 19, 2013 at 4:38 pm #

    Many thanks for sharing this story. I am absolutely tired of desperate
    for relevant and smart commentary on this subject. Everyone nowadays seem to go to extremes to either
    drive home their perspective or suggest that everybody else in the globe is
    wrong. thank you for your concise and relevant understanding.

  103. araba park etme December 23, 2013 at 11:01 am #

    What a lovely share.

  104. hafta hafta gebelik February 12, 2014 at 10:58 pm #

    Share share.

  105. dizi fragman izle February 25, 2014 at 6:39 am #

    Thanks… admin good post

  106. My Lead System Pro video review June 13, 2014 at 9:01 pm #

    This piece of writing is actually a nice one
    it assists new web people, who are wishing in favor of blogging.

  107. Köln September 19, 2014 at 2:03 pm #

    Thank you very much for this good informations! Best greetings

  108. raf firmaları September 23, 2014 at 7:42 am #

    thank you for you shareds good lock

Trackbacks/Pingbacks

  1. Blog Xebia France - Revue de Presse Xebia - May 26, 2008

    [...] Coenraets, Senior Technical Evangelist chez Adobe, a développé à l’aide de cette API un outil de “cartes collaboratives” qui permet de commenter à plusieurs dans une “chat room” une carte Google Maps en lui ajoutant [...]

  2. gMap Rooms, chats en Google Maps TecnoMaps.com - May 29, 2008

    [...] Sitio Web: MapRooms [...]

  3. RenaLId.com :: Revue du Geoweb de la semaine - June 1, 2008

    [...] mashup avec Google Maps API Flash MapRooms est un mashup créé par Christophe Coenraets à partir de Google Maps API Flash. Il propose des "Chat Rooms" accompagnées [...]

  4. Flex, Google Maps & BlazeDS : mashup powa - June 7, 2008

    [...] nouvel API de google maps dédié à Flash simplifie la vie du développeur et voici cette démonstration avec BlazeDS, le serveur Adobe Open source de Push Data – c’est le serveur qui pousse les [...]

  5. aarpprovideronline - June 20, 2008

    aarpprovideronline…

    incumbent!therewith parenthetical,sophomores …

  6. Google Maps Developer Video & Links Roundup | geo2web.com - June 23, 2008

    [...] Google Maps Collaboration Using Google’s New ActionScript API, Flex, and BlazeDSa> [...]

  7. SOG knives - July 17, 2008

    SOG knives…

    Interesting ideas… I wonder how the Hollywood media would portray this?…

  8. gratis internet texas holdem - July 20, 2008

    gratis internet texas holdem…

    beggary aerials abolishers?electrocuting mainframe Demeter …

  9. Indicator » Blog Archive » Google Maps Flash API - September 24, 2008

    [...] Links: The Google Maps Flash API An Example Application [...]

  10. Andrew Shorten » Collaborative Google Maps in Flex using Cocomo - December 12, 2008

    [...] this year Christophe Coenraets, a colleague on the Platform Evangelism team, created an example application which combined Google’s ActionScript API, Flex and BlazeDS to provide a real-time [...]

  11. Life As An Evangelist » Collaborative Google Maps in Flex using Cocomo - December 12, 2008

    [...] this year Christophe Coenraets, a colleague on the Platform Evangelism team, created an example application which combined Google’s ActionScript API, Flex and BlazeDS to provide a real-time [...]

  12. Resources for working with Flex, Flash, AMFPHP, Zend and BlazeDS « Philadelphia Flash Platform Adobe User Group - August 13, 2009

    [...] Zend, Google Maps, AS3 and BlazeDS: http://coenraets.org/blog/2008/05/google-maps-collaboration-using-googles-new-actionscript-api-and-b… [...]

Leave a Reply

css.php