var osMap, lgpx;

// This function creates the map and is called by the div in the HTML

function init()

  {
    
// Create new map
    
    osMap = new OpenSpace.Map('map');
    
// Set map centre in National Grid Eastings and Northings and select zoom level 7

    osMap.setCenter(new OpenSpace.MapPoint(392905, 433010), 7);
    
// Load the gpx route as a new GPX OpenLayers layer    
    
    lgpx = new OpenLayers.Layer.GML("gpx", "/res/gpxroute.gpx", {
      
      format: OpenLayers.Format.GPX,
      style: {strokeColor: "blue", strokeWidth: 3, strokeOpacity: 1},
      projection: new OpenLayers.Projection("EPSG:4326")
      
      });
                
// Add the gpx layer to the map
    
    osMap.addLayer(lgpx);
            
  }

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Add a. gpx (GPS route) file</title>

<!-- Remember to insert your own API key in the URL below -->
  
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=FFF3760C96A84469E0430C6CA40A1131"></script>  
  
<!-- If you use OS OpenSpace Pro or OS OnDemand WMTS then use the relevant following URL instead: 
  
OS OpenSpace Pro - <script type="text/javascript" src="http://osopenspacepro.ordnancesurvey.co.uk/osmapapi/openspace.js?key=INSERT_YOUR_API_KEY_HERE"></script>
  
OS OnDemand WMTS - <script type="text/javascript" src="http://ondemandapi.ordnancesurvey.co.uk/osmapapi/openspace.js??key=INSERT_YOUR_API_KEY_HERE"></script>
  
-->

<style>
  html, body {height: 100%;}
  #map {width: 700px; height: 500px; border:1px solid black;}
</style>

</head>  
  
<body onload="init()">
  
<h2>Add a .gpx (GPS route) file</h2>
  
<!-- The div below holds the map -->
  
<div id="map"></div>
  
</body>
</html>