I have been stuck on this problem for 3 days. longest problem i have ever had fixing something. I am obviously new to AJAX. PLease please please help

please take a look at this site and my code and tell me where im messing up here..

www.wuno.biz

This is the index page

<html>
<head>
<title>Liberty-Partners</title>



<link rel="stylesheet" href="css/layout.css" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyD0X4v7eqMFcWCR-VZAJwEMfb47id9IZao"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.2.custom.js"></script>
<script type="text/javascript" src="js/gmap.js"></script>
<script type="text/javascript" src="js/geo.js"></script>
<script type="text/JavaScript" src="js/nav.js"></script>
<script type="text/javascript" src="js/header.js"></script>
<script type="text/javascript">
function initGeolocation()
{
if( navigator.geolocation )
{
// Call getCurrentPosition with success and failure callbacks
navigator.geolocation.getCurrentPosition( success, fail );
}
else
{
alert("Sorry, your browser does not support geolocation services.");
}
}

function success(position)
{

document.getElementById('lat').value = position.coords.latitude
document.getElementById('longitude').value = position.coords.longitude;

}
function fail()
{
// Could not obtain location
}

</script>


</head>
<body onLoad="initialize(); initGeolocation();">

<div class="wrapper.col1">

<div id="banner"></div>
<script type="text/javascript" src="js/header.js"></script>
<div id="topnav">
<br />
<a class="topnav" href="#" id="lnk_1">Contact Us</a><br /><br />
<a class="topnav" href="#" id="lnk_2">About Us</a><br /><br />
<a class="topnav" href="#" id="lnk_3">Experience</a><br /><br />
<a class="topnav" href="#" id="lnk_4">Services</a><br /><br />
<a class="topnav" href="#" id="lnk_5">Production</a><br /><br />
</div>


<div id="logo";>
<img src="images/lpLogo.JPG" alt="Liberty-Partners" height="212">
</div>
</div>

<br /><br />
<script type="text/JavaScript" src="js/explode.js"></script>
<div id="myDiv"></div>

<div style="clear: both;"></div>


<div class="wrapper.col4">


<div id="footer">
<div class="box1">
<h2><center>Our Contact Details !</center></h2>
<ul>
<center><li>Liberty-Partners</li>


<li>812 West 9th Street</li>
<li>Okmulgee, OK 74447</li>
<li>United States</li>
<li>Tel: 918-756-6474</li>
<li>Fax: 866-786-0501</li>
<li> <a href="https://www.linkedin.com/pub/jesus-diaz/24/987/1a0" style="background-color:none; float:left;" target="blank" title="Jesus Diaz"><img src="images/linkin.png" width="70"></a>&nbsp; <a href="https://www.linkedin.com/pub/martha-diaz/3b/769/524" style="background-color:none; float:right;" target="blank" title="Martha Diaz"><img src="images/linkin.png" width="70"></a></center>
<br />
</ul>
</div>

<div class="box flickrbox">
<p><strong> &nbsp;<a class="topnav" href="#" id="lnk_6">Click For Directions</a></strong></p>

<div id="map_canvas" style= "width:600px; height:300px"></div>

</div>
</div>

</div>
<br class="clear" />




<!-- #################################################################################################### ### -->
<div class="wrapper col5">
<div id="copyright">

<p class="center">Copyright &copy; 2009 - All Rights Reserved - WWW.LIBERTY-PARTNERS.COM</a></p>


</div>

</div>

</body>
</html>







This is the map page when u click the link at the bottom right corner of index page it takes u here but no map appears. i want map to show your geo location and then on click of map show you a rout to the defined destination

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">


$(document).ready(function () {

function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latlng = new google.maps.LatLng(latitude, longitude);
var mapOpts = {zoom: 15, center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID};
var canvas = document.getElementById('map_canvas');
var map = new google.maps.Map(canvas, mapOpts);
var marker = new google.maps.Marker({position: latlng,
map: map});
var dirServ = new google.maps.DirectionsService();
var dirDisp = new google.maps.DirectionsRenderer();
var panel = document.getElementById('dir_panel');

dirDisp.setMap(map);
dirDisp.setPanel(panel);
google.maps.event.addListener(map, 'click', function(event) {
dirServ.route({origin: latlng, destination: '32.794213,-96.618572',
travelMode: google.maps.TravelMode.DRIVING},
function(result, status) {
if (status === google.maps.DirectionsStatus.OK)
dirDisp.setDirections(result);
});
});
}
});
</script>
</head>
<body onLoad="initialize(); initGeolocation();">
</div>
<br class="clear" />
</div>
</div>
<div class="wrapper col2">
<div id="breadcrumb">
<h2><strong><center>Click Map For Directions</center></strong></h2>
</div>
<br class="clear" />
</div>



<div id="mapWrap">
<div id="mapContainer">


<div id="dir_panel"><strong><center>Turn By Turn Directions</center></strong></div>

<div id="map_canvas">Map Display</div>


</div>


</div>
<br class="clear" />
</div>

</body>
</html>