private function distance(point1: Object,
  point2 : Object) : Number {
 var lat1 : Number;
 var lat2 : Number;
 var lon1 : Number;
 var lon2 : Number;
 if (point1 == null) return 0;

 // convert degrees to radians

 lat1 = point1.lat * Math.PI / 180.0;
 lat2 = point2.lat * Math.PI / 180.0;

 lon1 = point1.lon * Math.PI / 180.0;
 lon2 = point2.lon * Math.PI / 180.0;	

 // radius of earth in Kilometers converted to miles

 var radius : Number = 6378.1 * 0.621371192;
 var latDist : Number = lat2 - lat1;
 var lonDist : Number = lon2 - lon1;
 var sinLatDist : Number = Math.sin(latDist/2.0);
 var sinLonDist : Number = Math.sin(lonDist / 2.0);
 var a : Number = sinLatDist * sinLatDist +
    Math.cos(lat1) * Math.cos(lat2) *
    sinLonDist * sinLonDist;
 var c : Number = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 var distance : Number = radius * c;
 return distance;
}

Kenndey / Shannon / Hicks Roads Trail, Los Gatos, Sheldon Road Trail, Pebble Beach, 17 Miles Drive Trail, Los Gatos, San Jose Trail, Stevens Creek Reservoir Trail, Kennedy / Hicks Trail, St. Joseph Hills, Los Gatos Trail, Lake Lexington Trail

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.

Now the route animation of the Sheldon Road Trail looks a lot better. So does other routes, e.g. the Pebble Beach route, Kenndey/Shannon/Hicks Roads route, or the Stevens Creek Reservoir route.

<mx:Sequence id="myMove" target="{slider}">
    <mx:AnimateProperty property="value"
      fromValue="{timeMin}"
      toValue="{timeMax}"
      duration="{selectedItem.data}" />
</mx:Sequence>

Next, you’ll need to extend the HSlider control and override the set value method. See the control Note19HSlider. This extension of HSlider, includes a callback function that is set to the method sliderMove, which gets called each time the value of the slider has been updated, this in turn updated the chart and the Google Map. The code for all of this is here.

Each time the value of the Slider changes, the following function gets called:

private function sliderMove(val:String):String {
  point0["x"] = val;
  point0["y"] = 0;
  point1["x"] = val;
  point1["y"] = elevationMax;
  // timeLineData is a Bindable object; the time line
  // on the elevation chart is dependent on this object.
  timeLineData.setItemAt(point0, 0);
  timeLineData.setItemAt(point1, 1);

  // Use binary search to find the closest elevation point to the
  // value of the slider

  var index : int = binarySearch(Number(val), 0, elevationData.length-1);
  var lat : Number = elevationData[index].lat;
  var lon : Number = elevationData[index].lon;

  // Update the Google map

  var u:URLRequest =
    new URLRequest("javascript:centerMap('" + lat + "','" + lon + "')");
  navigateToURL(u,"_self");

  return "Time: " + String(val);
}

The extension to the Slider is provided as an MXML file (Note19HSlider.mxml):

<mx:Script>
<![CDATA[
	public var callback : Function = null;

	override public function set value(val:Number):void {
		super.value = val;
                // callback is initialized to be the sliderMove function.
		callback(val);
	}
]]>
</mx:Script>

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. 

<gpx version="1.0" ...>
<time>2007-10-24T02:45:26Z</time>
<bounds minlat="37.221354973"
   minlon="-121.987776104"
   maxlat="37.330222065"
   maxlon="-121.892523821"/>
...
</gpx>

Here is how you can use the Google MAP API to center the routes based on the bounds element in the GPX file:

var b = xmlDoc.documentElement.getElementsByTagName("bounds");
var sw = new GLatLng(b[0].getAttribute("minlat"), b[0].getAttribute("minlon"));
var ne = new GLatLng(b[0].getAttribute("maxlat"), b[0].getAttribute("maxlon"));
var bounds = new GLatLngBounds(sw, ne);
map.setCenter(bounds.getCenter(), 12);

Here is the above code in action: Los Gatos, Stevens Creek Reservoir bike trail

The Route Player that I’m writing is more functional than before. When you click on the thumbnail, you’ll see the elevation chart plus a google map displaying the route. As you hover over the elevation chart, a maker is shown on the route. The chart is in Flex and the map in DHTML. Both the Flex and the DHTML parts read the GPX file and convert the XML data into elevation chart and map route. (The slider is still not working).

There are couple of interesting aspects to this latest version of the player: reading the GPX file and positioning the marker. The function load below is called on page load. This initializes the map and reads the GPX data, and where each point recorded by the GPS device is converted to a GPoint. Here is an example of a GPS device point recorded in GPX 1.0 format:

<trkpt lat="37.222033069" lon="-121.983074527">
  <ele>120.782837</ele>
<time>2007-10-14T18:33:22Z</time>
</trkpt>

Here is the load function:

function load() {
   if (GBrowserIsCompatible()) {
   	initMap(720, 300);
	var request = GXmlHttp.create();
	request.open("GET", "http://javey.net/bike/map/player/14-oct-2007.gpx", true);
	request.onreadystatechange = function() {
	    if (request.readyState == 4) {
	        var xmlDoc = null;
	        var textLength = parseFloat(request.responseText.length);
	        if (textLength > 0) {
		    xmlDoc = GXml.parse(request.responseText);
	        } else {
		    xmlDoc = request.responseXML;
	        }
                var points = xmlDoc.documentElement.getElementsByTagName("trkpt");
	        var track = new Array();
	        for (var i = 0; i < points.length; i++) {
	            var point =
                      new GPoint(parseFloat(points[i].getAttribute("lon")),
                                parseFloat(points[i].getAttribute("lat")));
	            track.push(point);
	        }
	        var p = new GPolyline(track);
	        map.addOverlay(p);
             }
       }
       // Send the request for data
       request.send(null);
    }
}

When you hover over the elevation chart, the JavaScript function centerMap is called (view source the page). This function in turn moves the marker on the map.

var marker;
function centerMap(lat, lng) {
    if (marker != null) {
        map.removeOverlay(marker);
    }
    var point = new GLatLng(lat, lng);
    map.setCenter(point);
    marker = new GMarker(point);
    map.addOverlay(marker);
}

Next I need to modify the code to allow loading of GPX files dynamically (perhaps specified via a URL parameter, e.g.) and I need to add playback feature to the player.

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.