Beyond the outer limits of my knowledge

I'm a designer by trade so this is way beyond my knowledge. I've
started off with this example:
http://www.econym.demon.co.uk/googlemaps/basic7.htm

The xml file contains:
<markers>
<marker lat="51.662217" lng="-3.251490"
html='&lt;div style="width:160px; background-color:#FFFFFF;
font-family:arial" &gt;The Partnership Office&lt;br&gt;&lt;img
src="office.jpg" alt="The partnership office" width=150
height=122&gt;&lt;br /&gt;a
href="mailto:enquiries@gppartnership.co.uk"&gt;enquiries@gppartnership.co.uk&lt;/a&gt;&lt;/div&gt;'
label="Partnership Office" icon="red"
/>
<line colour="#888800" width="2"></line>
</markers>

So what do I have to take / change from this code to work in the
second Javascript code (they both work, I just need custom icons,
polylines and a sidebar):
1st code:
<script type="text/javascript">
//<![CDATA[
// this is the Javascript that makes the map. It should be defined in
the head of the document

// global variables
var map;
var request;
// Create our "tiny" marker icon
var redIcon = new GIcon();
redIcon.image = "cf.png";
redIcon.shadow =
"http://labs.google.com/ridefinder/images/mm_20_shadow.png";
redIcon.iconSize = new GSize(24, 20);
redIcon.shadowSize = new GSize(22, 20);
redIcon.iconAnchor = new GPoint(6, 20);
redIcon.infoWindowAnchor = new GPoint(5, 1);
redIcon.imageMap = [4,0,0,4,0,7,3,11,4,19,7,19,8,11,11,7,11,4,7,0];
redIcon.transparent = "mapIcons/mm_20_transparent.png";

var blueIcon = new GIcon(redIcon);
blueIcon.image =
"http://labs.google.com/ridefinder/images/mm_20_blue.png";
var greenIcon = new GIcon(redIcon);
greenIcon.image =
"http://labs.google.com/ridefinder/images/mm_20_green.png";
var yellowIcon = new GIcon(redIcon);
yellowIcon.image =
"http://labs.google.com/ridefinder/images/mm_20_yellow.png";

function get_icon(iconStr) {
if (iconStr == "red") {
return redIcon;
} else if (iconStr == "blue") {
return blueIcon;
} else if (iconStr == "green") {
return greenIcon;
} else if (iconStr == "yellow") {
return yellowIcon;
} else { // if don't understand iconStr return a red one.
return redIcon;
}
}

// A function to create the marker and set up the event window
// function createMarker(point,name,html) {
function createMarker(point,name,html,iconStr) {

var marker = new GMarker(point);
if (iconStr) {
marker = new GMarker(point, get_icon(iconStr));
}

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}

// This function picks up the click and opens the corresponding info
window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

function makeMap() {
if (GBrowserIsCompatible()) {
// resize the map
var m = document.getElementById("map");
m.style.height = "400px";
m.style.width = "500px";

// create the map
map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.centerAndZoom(new GPoint(-79.359741, 43.907787), 8);
map.centerAndZoom(new GPoint(-3.236400, 51.659092), 3);

} else {
alert("your browser does not support Google Maps!");
}

document.MyForm.filename.value = "example.xml";
getXMLfile();

}

function getXMLfile() {
// Read the data from example.xml
request = GXmlHttp.create();
filename = document.MyForm.filename.value
if (filename.length == 0) {
alert("Please enter a filename!");
return false;
}

// filename = "example.xml"
request.open("GET", filename, true);
request.onreadystatechange = processXMLfile;

request.send(null);
return false;
}

function processXMLfile() {

if (request.readyState == 4) {
if (request.status == 200) {
var xmlDoc = request.responseXML;
if (xmlDoc.documentElement) {
// obtain the array of markers and loop through it
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");

map.clearOverlays();
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GPoint(lng,lat);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var icon = markers[i].getAttribute("icon");

// create the marker
var marker = createMarker(point,label,html,icon);
map.addOverlay(marker);
}
} else {
alert("invalid xml file:"+filename);
}
} else {
alert("file not found:"+filename);
}
}
}

// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/

//]]>
</script>
</head>
<body onload="makeMap();">

<!-- the div id="map" is where the map will go... -->
<div id="map" style="width: 0px; height: 0px"></div>
<div id="change">
<form name="MyForm" id="MyForm" onsubmit="return false;">
<input name="filename" type="text" id="filename" value="example.xml">
<input type="button" value="Click here!" onclick="getXMLfile();">
</form>
</div>

2nd code:

<body>

<!-- you can use tables or divs for the overall layout -->

<div id="map" style="width: 550px; height: 450px;"></div>

<div id="sidebar"></div>

<noscript><b>JavaScript must be enabled in order for you to use
Google Maps.</b>
However, it seems JavaScript is either disabled or not supported
by your browser.
To view Google Maps, enable JavaScript by changing your browser
options, and then
try again.
</noscript>

<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
// this variable will collect the html which will eventualkly be
placed in the sidebar
var sidebar_html = "";

// arrays to hold copies of the markers and html used by the
sidebar
// because the function closure trick doesnt work there
var gmarkers = [];
var htmls = [];
var i = 0;

// A function to create the marker and set up the event window
function createMarker(point,name,html) {
// FF 1.5 fix
html = '<div style="white-space:nowrap;">' + html + '</div>';
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the sidebar
gmarkers[i] = marker;
htmls[i] = html;
// add a line to the sidebar html
sidebar_html += '<a href="javascript:myclick(' + i + ')">' +
name + '</a><br>';
i++;
return marker;
}

// This function picks up the click and opens the corresponding
info window
function myclick(i) {
gmarkers[i].openInfoWindowHtml(htmls[i]);
}

// create the map
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//map.centerAndZoom(new GPoint(-3.236400, 51.659092), 3);
map.centerAndZoom(new GPoint(-3.249636, 51.659246), 3);

// Read the data from example.xml
var request = GXmlHttp.create();
request.open("GET", "example.xml", true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
// obtain the array of markers and loop through it
var markers =
xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new GPoint(lng,lat);
var html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
// create the marker
var marker = createMarker(point,label,html);
map.addOverlay(marker);
}
// put the assembled sidebar_html contents into the sidebar
div
document.getElementById("sidebar").innerHTML = sidebar_html;

// ========= Now process the polylines ===========
var lines =
xmlDoc.documentElement.getElementsByTagName("line");
// read each line
for (var a = 0; a < lines.length; a++) {
// get any line attributes
var colour = lines[a].getAttribute("colour");
var width = parseFloat(lines[a].getAttribute("width"));
// read each point on that line
var points = lines[a].getElementsByTagName("point");
var pts = [];
for (var i = 0; i < points.length; i++) {
pts[i] = new
GPoint(parseFloat(points[i].getAttribute("lng")),

parseFloat(points[i].getAttribute("lat")));
}
map.addOverlay(new GPolyline(pts,colour,width));
}
// ================================================

}
}
request.send(null);
}

else {
alert("Sorry, the Google Maps API is not compatible with this
browser");
}
// This Javascript is based on code provided by the
// Blackpool Community Church Javascript Team
// http://www.commchurch.freeserve.co.uk/
// http://www.econym.demon.co.uk/googlemaps/

//]]>
</script>
</body>