JQuery: OpenLayers map fails to load after onlclick method

I have an OpenLayers map on my JQM site which is failing to load properly. I'm convinced it's down to the onclick() method but I'm not too sure on any other ways around it. I've looked at the .click() method on the JQuery site but I don't think this will work due to how the method has to work.

The onclick() method is located within a list and loads a JS function which updates the html on another page. The list is populated by a PHP loop which gets it data from an array; the HTML which is changed depends on which item is picked. The function also creates the map on the same page.

Here is the PHP loop:

<?php       
          for ($row = 0; $row < $arrlength; $row++)
          {
              echo "<li>";   
              echo "<a href='#room-info' onclick='updateRoom(\"".$rooms[$row]["Room"]."\", \"".$rooms[$row]["Building"]."\", \"".$rooms[$row]["Campus"]."\", \"".$rooms[$row]["X"]."\", \"".$rooms[$row]["Y"]."\");'>";
              echo $rooms[$row]["Room"];
              echo "</a>"; 
              echo "</li>";
          }
?>

Here is the JS function:

function updateRoom(roomNumber, building, campus, xCoor, yCoor)
    {
        x=document.getElementById("roomInfo");  // Find the element
        x.innerHTML="<h1>Room</h1>" + roomNumber + "<br><h1>Building</h1>" + building + "<br><h1>Campus</h1>" + campus;    // Change the content

        var map, baseLayer;
        var options = {numZoomLevels: 7, isBaseLayer: true,};

        map = new OpenLayers.Map('map');            
        baseLayer = new OpenLayers.Layer.Image("College Lane","college-lane-large.png", 
        new OpenLayers.Bounds(-1000, -1000, 1000, 1000),
        new OpenLayers.Size(1500,1500), options);
        map.addLayer(baseLayer);

        var center = new OpenLayers.LonLat(xCoor,yCoor);
        map.setCenter(center ,0);  

        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addControl(new OpenLayers.Control.MousePosition());

        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
        var markers = new OpenLayers.Layer.Markers( "Marker" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(center), icon);
    }

Once an item is chosen, you are then taken to a page which shows the updated HTML and also the OpenLayers map. The html text updates correctly but the OpenLayers map is empty.

I would put the code on here but there is quite a bit. My site can be found here: http://getontinternet.com/fyp/index.php

To get to the troublesome page you have to first click 'find a room', search LC154 since this is the only item I have set up properly. Once that room is selected it will show the page.

I've been trying to fix this for days now so I will be so grateful is someone actually manages to figure out why it's not working :)