Hack 53. Add Flash Applets to Your Google Maps

Spice up your Google Map info windows with Macromedia Flash animation, and even Java applets.

Integrating Macromedia Flash with a Google Map is a snazzy way to enhance the multimedia experience of your web page. Although the examples given here are toys, no doubt the intrepid reader can find Useful Uses for this sort of integration in the real world.

6.4.1. Flash in the Info Window

As a first step, we'll embed a small Flash animation I've created called FlashBit.swf into the pop-up window of a marker. The animation is just some text with a blue ball that bounces across it when clicked, as seen in Figure 6-5.

We're going to use the openInfoWindowHtml( ) method of the GMarker class to add the required HTML to our document. The string we'll be passing is stored in a variable called flashHtml.

flashHtml = '' + '' + '' + '' + '' + '' + '' + '';

Figure 6-5. Flash animation in a Google Maps info window

Although the code above may look a little convoluted, it's really nothing more than a typical Flash object declaration. The object tag is used by Internet Explorer on Windows platforms, while Netscape and Internet Explorer for the Mac both use the embed tag instead. More information on why you need both tags can be found in Macromedia's knowledge base at http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_4150.

The most important parameters are movie and src, which should both point to the Flash SWF file. It's also important to set the wmode parameter to TRansparent in both the object and embed tags. Otherwise, the Flash object will overlap the map controls when the user scrolls the info window under them, as seen in Figure 6-6.

The following straightforward code creates our map. A marker called flashMarker is added to the map and, when clicked, it will call the onFlashMarkerClick() function:

var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.centerAndZoom(new GPoint(-122.07, 37.44), 4); var flashMarker = new GMarker(new GPoint(-122.07, 37.433)); map.addOverlay(flashMarker) GEvent.addListener(flashMarker,'click', onFlashMarkerClick);

Figure 6-6. Overlap caused by not including the wmode parameter

Unfortunately, there's a slight bug in that the Flash applet can "jump" out of the window after being clicked if it is inside the very first info window that is opened. You can see the problem by going to http://www.googlemappers.com/articles/embedapplets/default.htm and clicking "Show me the bug."

However, I've found that if the map has to be scrolled to show the info window, the bug doesn't occur. So in the onFlashMarkerClick() handler, I've put in a small hack that scrolls the map away from the marker the first time openInfoWindowHtml() is called. This way, the Google Map API internals will scroll the map back to the marker before opening the info window, and the bug won't occur.

var flashFixed = false; function onFlashMarkerClick() { html = '

' + '

Click below to poke the Flash object.

'; html = html + flashHtml; if (!flashFixed) { flashFixed = true; // only need to do this once map.centerAndZoom(new GPoint(-122.07, 37.43), 4); } // Now open the real one on top flashMarker.openInfoWindowHtml(html); }

6.4.2. Communication Between Flash and Your Google Map

Integrating Flash and Google Maps becomes much more interesting when you get the two talking to each other. You can make use of the Flash fscommand( ) method to invoke any JavaScript function on the page, and use the SetVariable( ) method in your JavaScript code to pass data back into your Flash applet. A complete tutorial is available in a Flash TechNote at http://www.macromedia.com/cfusion/knowledgebase/index.cfm?id=tn_15683#jtfc.

You can also take a look at my scuba-diving log at http://www.leapbeyond.com/ric/scuba/ to see an example of an application that tightly integrates a Flash web site with a Google Map. Just go into the logbook a few pages and hit one of the map icons to get started.

6.4.3. Beyond Flash

The technique described can work with other types of objects in addition to Flash files. For example, you can embed a Java applet into the info window. Figure 6-7 shows how I used Robert Jeppesen's Durius Java applet (available at http://www.durius.com/) to embed a Google logo that ripples with a watery effect when you pass the mouse over it.

Figure 6-7. A Java applet embedded in a Google Map info window

The second marker is added after creating your map:

var appletMarker = new GMarker(new GPoint(-122.082667, 37.423269)); map.addOverlay(appletMarker); GEvent.addListener(appletMarker,'click', onAppletMarkerClick);

Here's the click handler:

function onAppletMarkerClick() { html = '

' + '

Move your mouse around the image below ' + 'to poke the Java applet.

' + '

' + 'Note: Clicking it will leave this page

'; // In the html string, create a div containing the applet html = html + '

' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '' + '

'; appletMarker.openInfoWindowHtml(html); }

You can see all of these examples at http://www.googlemappers.com/articles/embedapplets/default.htm.

Richard Kagerer