n o t e 1 9 . c o m

You can mix DHTML and Flex in one page without too much effort. Here is how you do this:

1. Add a DIV for the DHTML element that you wish to include after the embed Flash tags.
2. Include the Google Map JavaScript as before in your HTML
3. Add JavaScript methods that you wish to call from Flex
4. In your Flex application, you can call these JavaScripts using the navigateToURL method. For example, as you move the mouse over the chart, the chartToolTip method is called which in turn updates the map.

   
   private function chartToolTip(e:HitData) : String {
      var s:String;
      s = "'" + LineSeries(e.element).displayName + "\n";
      s += "Time: " + e.item.x + " decimal hours\n";
      s += "Elevation: " + e.item.y + " meters\n";
      s += "Latitude: " + e.item.lat + " degrees\n";
      s += "Longitude: " + e.item.lon + " degrees\n";
      var u:URLRequest = new URLRequest("javascript:centerMap('"
            + e.item.lat
            + "','"
            + e.item.lon + "')");
      navigateToURL(u,"_self");
      return s;
   }

My Route Player is no where near complete yet, but now at least I have some of the answers on how I will use Flex and Google maps to create this player. The code for this player is here. See also this article which may give you clues on how you could “embed” Google Map in a Flex control.

You can also overlay a Flex control on top of DHTML based Google map. Click here for details. Here is an example of a Flex overlay.

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