function routeList(eleName, url)
{
    if (! GBrowserIsCompatible()) 
    {
        alert("Sorry, the Google Maps API is not compatible with this browser");
        return;
    } 
    var map = new GMap2(document.getElementById(eleName));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addMapType(G_PHYSICAL_MAP); 
    // ==== It is necessary to make a setCenter call of some description before adding markers ====
    // ==== At this point we dont know the real values ====
    map.setCenter(new GLatLng(0,0),0);
    map.setMapType(G_PHYSICAL_MAP);

    var gmarkers = [];
    var htmls = [];
    var i = 0;
    var poly = [];

    function createMarker(point,route) {
        var newIcon = MapIconMaker.createMarkerIcon({width: 16, height: 32, primaryColor: route.color});
        var marker = new GMarker(point, {title:route.name, icon:newIcon});
            GEvent.addListener(marker, "click", function() {
            marker.openInfoWindowHtml(route.desc);
            });
        gmarkers[i] = marker;
        htmls[i] = route.desc;
        i++;
        return marker;
    }

    function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
    }

    function addMarkers(route)
    {

        // obtain the attribues of each marker
        var lat = parseFloat(route.Latitude);
        var lng = parseFloat(route.Longitude);
        var point = new GLatLng(route.lat, route.lon);
        //route.desc = '<strong>' + route.name + '</strong><p>' + route.desc + '</p><a href="/Pages/Index.ashx?ContentID=' + route.ContentID + '">View Trek</a>';
        route.desc = '<strong>' + route.name + '</strong><p><a href="/Pages/Index.ashx?ContentID=' + route.ContentID + '">View Trek</a></p>';

        // create the marker
        var marker = createMarker(point,route);
        map.addOverlay(marker);

        // ==== Each time a point is found, extent the bounds ato include it =====
        bounds.extend(point);
    }

    // ===== Start with an empty GLatLngBounds object =====     
    var bounds = new GLatLngBounds();

    new Ajax.Request(url,{
        onComplete: function(transport) {
            //debugger;
            var routes = JSON.parse(transport.responseText);

            for (var i = 0; i < routes.length; i++) {
              addMarkers(routes[i]);
            }

            // ===== determine the zoom level from the bounds =====
            map.setZoom(map.getBoundsZoomLevel(bounds));

            // ===== determine the centre from the bounds ======
            map.setCenter(bounds.getCenter());

            }
        });
}

function routeMap(eleName, url)
{
    if (! GBrowserIsCompatible()) 
    {
        alert("Sorry, the Google Maps API is not compatible with this browser");
        return;
    } 
    var map = new GMap2(document.getElementById(eleName));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.addMapType(G_PHYSICAL_MAP); 
    // ==== It is necessary to make a setCenter call of some description before adding markers ====
    // ==== At this point we dont know the real values ====
    map.setCenter(new GLatLng(0,0),0);
    map.setMapType(G_PHYSICAL_MAP);

    var gmarkers = [];
    var htmls = [];
    var i = 0;

    function createMarker(point, rtept) {
        //debugger;
        var newIcon = MapIconMaker.createMarkerIcon({width: 16, height: 32, primaryColor: rtept.color});
        var marker = new GMarker(point, {title:rtept.label, icon:newIcon});
        GEvent.addListener(marker, "click", function() {
            marker.openInfoWindow(rtept.desc);
            });
        gmarkers[i] = marker;
        htmls[i] = rtept.desc;
        i++;
        return marker;
    }
    
    function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
    }

    function addMarkers(route)
    {
        route.polys = [];
        for (var i = 0; i < route.RoutePoints.length; i++) {
            var rtept = route.RoutePoints[i];
            var point = new GLatLng(rtept.lat, rtept.lon);

            // create the marker
            if (rtept.desc && rtept.desc.length > 0)
            {
              var marker = createMarker(point, rtept);
              map.addOverlay(marker);
            }

            route.polys.push(point);
            
            // ==== Each time a point is found, extent the bounds to include it =====
            bounds.extend(point);
        }
    }
    
    function addLineSegment(track)
    {
        track.polys = [];
        for (var i = 0; i < track.TrackPoints.length; i++) {
            var rtept = track.TrackPoints[i];
            var point = new GLatLng(rtept.lat, rtept.lon);

            track.polys.push(point);
            
            // ==== Each time a point is found, extent the bounds to include it =====
            bounds.extend(point);
        }
    }
    
    function addWaypoints(wpts)
    {
        //debugger;
        for (var i = 0; i < wpts.length; i++) {
            var rtept = wpts[i];
            var point = new GLatLng(rtept.lat, rtept.lon);

            // create the marker
            if (rtept.desc && rtept.desc.length > 0)
            {
              var marker = createMarker(point, rtept);
              map.addOverlay(marker);
            }

            //route.polys.push(point);
            
            // ==== Each time a point is found, extent the bounds to include it =====
            bounds.extend(point);
        }
    }
    
    // ===== Start with an empty GLatLngBounds object =====     
    var bounds = new GLatLngBounds();

    new Ajax.Request("/Gpx/RouteJson.ashx?ContentID=" + url,{
        onComplete: function(transport) {
            //debugger;
            var gpxMap = eval('(' + transport.responseText + ')');

            for (var i = 0; i < gpxMap.Routes.length; i++) {
              var rte = gpxMap.Routes[i];
              addMarkers(rte);
              map.addOverlay(new GPolyline(rte.polys, rte.color, 2, 0.9));
            }
            
            for (var i = 0; i < gpxMap.Tracks.length; i++) {
              var rte = gpxMap.Tracks[i];
              addLineSegment(rte);
              map.addOverlay(new GPolyline(rte.polys, rte.color, 2, 0.9));
            }
            
            addWaypoints(gpxMap.Waypoints);
            
            // ===== determine the zoom level from the bounds =====
            map.setZoom(map.getBoundsZoomLevel(bounds));

            // ===== determine the centre from the bounds ======
            map.setCenter(bounds.getCenter());

            }
        });
}

/**
 * MapIconMaker v1.0
 * Copyright (c) 2008 Pamela Fox
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License. 
 *
 *
 *  Author: Pamela Fox
 *
 *  This gives you static function(s) for creating dynamically sized and
 *  colored marker icons using the Charts API marker output.
 */

var MapIconMaker = {};

MapIconMaker.createMarkerIcon = function(opts) {
  var width = opts.width || 32;
  var height = opts.height || 32;
  var primaryColor = opts.primaryColor || "#ff0000";
  var strokeColor = opts.strokeColor || "#000000";
  var cornerColor = opts.cornerColor || "#ffffff";
   
  var baseUrl = "http://chart.apis.google.com/chart?cht=mm";
  var iconUrl = baseUrl + "&chs=" + width + "x" + height + 
      "&chco=" + cornerColor.replace("#", "") + "," + primaryColor.replace("#", "") + "," + strokeColor.replace("#", "") + "&ext=.png";
  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = iconUrl;
  icon.iconSize = new GSize(width, height);
  icon.shadowSize = new GSize(Math.floor(width*1.6), height);
  icon.iconAnchor = new GPoint(width/2, height);
  icon.infoWindowAnchor = new GPoint(width/2, Math.floor(height/12));
  icon.printImage = iconUrl + "&chof=gif";
  icon.mozPrintImage = iconUrl + "&chf=bg,s,ECECD8" + "&chof=gif";
  iconUrl = baseUrl + "&chs=" + width + "x" + height + 
      "&chco=" + cornerColor.replace("#", "") + "," + primaryColor.replace("#", "") + "," + strokeColor.replace("#", "");
  icon.transparent = iconUrl + "&chf=a,s,ffffff11&ext=.png";

  icon.imageMap = [
      width/2, height,
      (7/16)*width, (5/8)*height,
      (5/16)*width, (7/16)*height,
      (7/32)*width, (5/16)*height,
      (5/16)*width, (1/8)*height,
      (1/2)*width, 0,
      (11/16)*width, (1/8)*height,
      (25/32)*width, (5/16)*height,
      (11/16)*width, (7/16)*height,
      (9/16)*width, (5/8)*height
  ];
  for (var i = 0; i < icon.imageMap.length; i++) {
    icon.imageMap[i] = parseInt(icon.imageMap[i], 10);
  }

  return icon;
};