I'm having a little bit of trouble with setting up a Google map to add markers for events venues.

The page is dynamically created using postcodes from a database which is why the code might look a little strange, but it's the only way I could find to make it work. However, I'm struggling to add any further functionality to the page.

As you will see from the code attached I would like to add buttons to reset the map to it's initial state, plus buttons to show only the "O" markers or the "E" markers. Also, I would ideally only like to see the "O" markers when the page first loads.

I know this is a lot to ask but could anyone please help.

Thanks

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>HPB Open days and Exhibitions Locator</title>
<style type="text/css">

html {
        
}
body {
        margin: 0;
        padding: 0;
        height: 100%;
		background-color:#000;
}
#map {
        width: 980px;
        height: 580px;
        z-index:1;
		position:relative;
		margin:25px auto;
}


.controls {
        background-color:#597681;
        padding:10px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.controls p {
        margin:0;
		padding:0;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext {
        position:absolute;
        top:10px;
        left:0px;
        width:425px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 {
        margin:0;
		padding:10px 20px;
		background-color:#000;
		color:#FFF;
		font-size:24px;
		font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-style:italic;
		font-weight:normal;
}

.introtext p {
        margin:0;
		padding:10px 20px;
		background-color:#BF443A;
		color:#FFF;
		font-size:12px;
		font-family:'Trebuchet MS', Arial, Helvetica, sans-serif;
}

.introtext h2 strong {
        font-weight:bold;
}

#postcode {width:150px; color:#999;}

</style>
        
<script src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAQJTCOfFBzEZfb0xYTu1h_BR0_9owy9VLLEJCKI_ZedHr-0NdXxQd9Q8sR1hC7s4PNGNVmIaTUQvspA" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript">
function doBlur() {
	if (document.getElementById('postcode').value == '') { document.getElementById('postcode').value = 'Postcode'; document.getElementById('postcode').style.color = '#999'; }
};

function doFocus() {
	if (document.getElementById('postcode').value == 'Postcode') { document.getElementById('postcode').value = ''; document.getElementById('postcode').style.color = '#000'; }
};

function doSwitch() {
	if (document.getElementById('postcode').value == 'Postcode') {alert('Valid postcode required');} else {  usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint); }
};


</script>
  

</head>
<body>

<div id="map">

</div> 


      
<script type="text/javascript">
var map;
var localSearch = new GlocalSearch();

var icon = new GIcon();
icon.image = "markers/yellow_MarkerO.png";
icon.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon.iconSize = new GSize(20, 34);
icon.shadowSize = new GSize(37, 34);
icon.iconAnchor = new GPoint(10, 34);
icon.infoWindowAnchor = new GPoint(10, 0);

var icon2 = new GIcon();
icon2.image = "markers/blue_MarkerE.png";
icon2.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon2.iconSize = new GSize(20, 34);
icon2.shadowSize = new GSize(37, 34);
icon2.iconAnchor = new GPoint(10, 34);
icon2.infoWindowAnchor = new GPoint(10, 0);

var icon3 = new GIcon();
icon3.image = "http://www.google.com/mapfiles/marker.png";
icon3.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon3.iconSize = new GSize(20, 34);
icon3.shadowSize = new GSize(37, 34);
icon3.iconAnchor = new GPoint(10, 34);




function usePointFromPostcode(postcode, callbackFunction) {
	localSearch.setSearchCompleteCallback(null, function() {
		if (localSearch.results[0]) {
			var resultLat = localSearch.results[0].lat;
			var resultLng = localSearch.results[0].lng;
			var anotherpoint = new GLatLng(resultLat,resultLng - 1.20000);
			var point = new GLatLng(resultLat,resultLng);
			callbackFunction(point, anotherpoint);
		}
		else 
		{
			alert("Postcode not found!");
		}
	});
	
	localSearch.execute(postcode + ", UK");
	
}

if (GBrowserIsCompatible()) {
	function createMarker(point,html) {
		var marker4 = new GMarker(point,icon);
		GEvent.addListener(marker4, "click", function() {
			marker4.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker4;
	}
	
	function createMarker2(point2,html) {
		var marker2 = new GMarker(point2,icon2);
		GEvent.addListener(marker2, "click", function() {
			marker2.openInfoWindowHtml(html, {
				noCloseOnClick: false
			});
		});
		return marker2;
	}

	var map = new GMap2(document.getElementById("map"));
	
	map.setCenter(new GLatLng(53.80000, -8.41387), 6);
	map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10)));

}

else {
	alert("Sorry, the Google Maps API is not compatible with this browser");
}




function placeMarkerAtPoint(point, anotherpoint) {
	var marker3 = new GMarker(point,icon3);
	map.addOverlay(marker3);
	map.setCenter(anotherpoint, 8);
}
	
</script>

<script type="text/javascript">
$(document).ready(function(){
	$("#map").append("<div class='introtext'><div class='controls'></div></div>");
	$("#map > .introtext").prepend("<h2>Forthcoming <strong>shows</strong></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mauris eros, sollicitudin in rhoncus in, pharetra a lorem. Nunc semper lectus ut libero interdum ut pharetra ipsum mattis.</p>");
	$("#map > .introtext > .controls").append("<p>Find a show</p><input type='text' id='postcode' size='10' value='Postcode' onFocus='doFocus();' onBlur='doBlur();' /><input type='submit' value='Search' onClick='doSwitch();' id='yourlocation' /><input type='submit' value='reset' id='iliketoreset' /><input type='submit' value='set E' id='ionlywantex' />    <input type='submit' value='set O' id='ionlywantod' />");
});
</script>

<script type="text/javascript">
	var localSearchBH193HG = new GlocalSearch();
	
	localSearchBH193HG.execute("BH19 3HG, UK");
	localSearchBH193HG.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchBH193HG.results[0].lat,localSearchBH193HG.results[0].lng),'<h2>O Venue 1</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchSY79LT = new GlocalSearch();
	
	localSearchSY79LT.execute("SY7 9LT, UK");
	localSearchSY79LT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker(new GLatLng(localSearchSY79LT.results[0].lat,localSearchSY79LT.results[0].lng),'<h2>O Venue 2</h2>'));
	});	
</script>

<script type="text/javascript">
	var localSearchRG46UT = new GlocalSearch();
	
	localSearchRG46UT.execute("RG4 6UT, UK");
	localSearchRG46UT.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchRG46UT.results[0].lat,localSearchRG46UT.results[0].lng),'<h2>E Venue 1</h2>'));
	});	
</script>
	
<script type="text/javascript">
	var localSearchPE36GA = new GlocalSearch();
	
	localSearchPE36GA.execute("PE3 6GA, UK");
	localSearchPE36GA.setSearchCompleteCallback(null, 
		function() {
			map.addOverlay(createMarker2(new GLatLng(localSearchPE36GA.results[0].lat,localSearchPE36GA.results[0].lng),'<h2>E Venue 2</h2>'));
	});	
</script>

</body>
</html>