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

<!DOCTYPE html>
<script class="jsbin" src=""></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=""></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=""></script>
OS OnDemand WMTS - <script type="text/javascript" src=""></script>

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

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