Archive for the ‘Google’ Category

Full screen route maps with elevations

December 1, 2007

Hacking Google MapsThe route player is updated to allow full screen maps (with auto resize). In addition, it now has both the elevation/distance & elevation/time charts. To calculate the distance I used the following ActionScript method to find the distance between two geo points (see Hacking Google Maps for details):

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 = * Math.PI / 180.0;
 lat2 = * 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

How to add a Flex control to Google Maps

November 27, 2007

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.

Smooth Route Animation in Google Maps: panTo vs. setCenter

November 26, 2007

In my first attempt to animate a route on Google Maps, I used the GMap2.setCenter method. This provided for a spotty animation:

As the marker moved along the route, the background map (as you can see) would often not render. Changing to use GMap2.panTo instead of the GMap2.setCenter method fixed this problem and the flickering of the route problem that I was seeing on Safari.

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.

How to animate a Flex Slider & update Google maps

November 24, 2007

Flex Slider AnimationFlex offers a number of different animation techniques. For my Route Player application, I wanted to offer an animation speed option so that when the user clicks on the Start button, Flex Slider Animation Control the animation starts: the Flex horizontal slider moves to the right, the time-line on the elevation chart moves accordingly, and the Google map gets updated. To see what I mean, click on the thumbnail, and when the Flex application starts, click on the Start button. To make this all work, first you need to define a Flex Sequence control, and include an AnimateProperty that specifies the duration of the animation.

<mx:Sequence id="myMove" target="{slider}">
    <mx:AnimateProperty property="value"
      duration="{}" />

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.


How to embed Google Maps in Flex

November 22, 2007

Embed Google Map in FlexCreate your Flex application as you would normally do, design the UI and set aside a rectangle in which you wish to display Google Maps. In the HTML wrapper for the Flex application, add a DIV for the Google map, and add JavaScript functions to show or hide this DIV. These functions will be called from Flex when you need to show or hide the map. In this example, I’ve added the Google map to a Flex Accordion control. The map is shown when you click on the tab “Google Map” and is hidden when you click on the other tabs. The trick to get this to work is to use the Flash wmode="transparent" option when the Flash object is embedded in the HTML page. The code for this example is here.

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

How to use GPX bounds to center the map

November 21, 2007

A GPX file has a bounds element that defines the coordinates of the bounding box of all the GPS points in the file. Here is an example:

<gpx version="1.0" ...>
<bounds minlat="37.221354973"

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

Lake Lexington Bike Trail

November 19, 2007

Lake Lexington Bike TrailThis morning, Allen and I went for bike ride around Lexington Lake. The ride started and ended at down town Los Gatos. The ride was 11.72 miles and took an hour and a half. The ride is relatively easy and quite relaxing. There are a few climbs that provide a good workout.

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).

GPX Player with Flex & Google Maps

November 18, 2007

GPX PlayerThe Route Player that I’m working on is coming along. The most difficult part of this pet project is finding time to spend on it. Anyhow, now it can read the GPX file (using Google Map AJAX APIs), display the route and as you mouse over the elevation chart (in FLEX), a marker is moved along the route to let you easily find out the steepest parts of the route, e.g.

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">

Here is the load function:

function load() {
   if (GBrowserIsCompatible()) {
   	initMap(720, 300);
	var request = GXmlHttp.create();"GET", "", 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")),
	        var p = new GPolyline(track);
       // Send the request for data

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) {
    var point = new GLatLng(lat, lng);
    marker = new GMarker(point);

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.

Elevation Chart in Flex with Google Maps

November 15, 2007

Flex with GoogleYou 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: " + + " degrees\n";
       s += "Longitude: " + e.item.lon + " degrees\n";
       var u:URLRequest = new URLRequest("javascript:centerMap('"
             + "','"
             + e.item.lon + "')");
       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.

Google Map route maker, geo coder

November 8, 2007

Google MapA while back I was experimenting with Google Map APIs and created a simple page to allow you to create a route (by clicking on the map) and let me find out the longitude and latitude of an address. This is still very much a work in progress. Once the page loads click on the map to add a marker and you can undo a marker or move it around. To see how it is done just view the HTML source.