I have a index page which pulls all my other pages in to a div on the main index page.

Everything works fine.

I have had google maps api working plenty of times on other sites. But when i juse a click function which i on a smaller map canvas in the footer

it is supposed to populate a large map which pin points your geolocation and gives you turn by turn directions.

The divs pop up and show where the map goes and where the directions go but nothing from google maps appears...

I was wondering if this is the placement of my .js files?

This is the page that should show everything im talking about .

<html>
<head>
<title>Directions</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" />
<script type="text/javascript" src="js/geo.js"></script>
<script type="text/javascript" src="js/gmap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

</head>

<body>


<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>


<!--
#################################################################################################### ### -->



<script type="text/javascript">
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>

</body>
</html>