var MyMap;

function LoadGPXFileIntoGoogleMap(map, filename)
{
	// Remove any existing overlays from the map.
	//map.clearOverlays();



	var request = GXmlHttp.create();
	request.open("GET", filename, true);
	request.onreadystatechange = function()
	{
		if (request.readyState == 4)
		{

			//alert(request.responseXML.xml);

			parser = new GPXParser(request.responseXML, map);
			parser.SetTrackColour("#ff0000");					// Set the track line colour
			parser.SetTrackWidth(5);							// Set the track line width
			parser.SetMinTrackPointDelta(0.001);				// Set the minimum distance between track points
			parser.CenterAndZoom(request.responseXML, G_NORMAL_MAP); // Center and Zoom the map over all the points.
			parser.AddTrackpointsToMap();						// Add the trackpoints
			parser.AddWaypointsToMap();							// Add the waypoints
		}
	}
	request.send(null);
}

function drawMap(file, mapID)
{
	MyMap = new GMap2(document.getElementById(mapID));
	MyMap.addControl(new GLargeMapControl());
	MyMap.addControl(new GMapTypeControl());
	MyMap.enableDragging(true);
	LoadGPXFileIntoGoogleMap(MyMap, file);
	
	var iconBlue = new GIcon(); 
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon(); 
    iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["start"] = iconBlue;
    customIcons["finish"] = iconRed;
}