I wanted to add a slide panel / but if i am doing this, it seems buggy. The panel is taking space and moving everything down.
<!DOCTYPE html>
<html>
<head>
<title>Airwriting</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> </meta>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="themes/airwriting.css" />
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAOgWsSa_ODLDkBACQPTzCvjpryShbNoho&sensor=true"></script>
<script src="jquery-1.9.1.min.js" language="JavaScript" type="text/javascript"></script>
<script src="jquery.mobile-1.3.0.min.js" language="JavaScript" type="text/javascript"></script>
<script src="index.js" language="JavaScript" type="text/javascript"></script>
</head>
<script>
<!--
</script>
<body>
<div data-role="page" id="airmap" data-fullscreen="true" class="page-map">
<div data-role="panel" id="mypanel">
test
</div><!-- /panel -->
<a href="#mypanel" data-icon="back" data-transition="fade">Profile</a>
<h1>Airwriting</h1>
</div>
<div id="map_canvas"></div>
<div id="position_icon_div" style="position: absolute;left: 15px; top: 140px;">
<a href="javascript:centerClick_function();" data-theme="" id="positionButton">
<img src="img/target.png" id="position_icon" width="40" height="40">
</a>
</div>
<div style="position: absolute;left: 15px; top: 210px;">
<a href="javascript:reloadClick_function();" data-theme="" id="reloadButton">
<img src="img/reload.png" id="reload_icon" width="40" height="40">
</a>
</div>
<div id="cloud_icon_div" style="position: absolute;right: 15px; top: 140px;">
<a href="javascript:cloudClick_function();" data-theme="" id="cloudButton">
<img src="img/icon_cloud_selected.png" id="cloud_icon" width="60" height="40">
</a>
</div>
<div style="position: absolute;right: 21px; top: 210px;">
<a href="javascript:buddyClick_function();" data-theme="" id="buddyButton">
<img src="img/icon_buddy_selected.png" id="buddy_icon" width="40" height="40">
</a>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<div data-role="navbar" data-iconpos="top">
<li><a href="#" id="map_icon" data-icon="custom" data-ajax="false">Map</a></li>
<li><a href="airwriters.html" id="airwriter_icon" data-icon="custom" data-ajax="false">Airwriters</a></li>
<li><a href="airlounges.html" id="airlounge_icon" data-icon="custom" data-ajax="false">Airlounges</a></li>
<li><a href="inbox.html" id="inbox_icon" data-icon="custom" data-ajax="false">Airmessages</a></li>
<li><a href="more.html" id="more_icon" data-icon="custom" data-ajax="false">More</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
-- /panel -->
</div>
</body>
</html>