index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Geo4map</title>   
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />    
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/layout.css" type="text/css">    
    <script src="js/ol.js" type="text/javascript"></script>    
  </head>
  <body>
    <div id="map" class="map"></div>  
    <div id="heading">Waiting for heading...
    <button onclick="startWatch();">Start Watching</button>
    <button onclick="stopWatch();">Stop Watching</button>
    </div>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>    
    <script type="text/javascript" src="js/index.js"></script>    
        <script type="text/javascript">
            app.initialize();
        </script>    
    <script type="text/javascript" charset="utf-8">

    // The watch id references the current `watchHeading`
    var watchID = null;

    // Wait for device API libraries to load
    document.addEventListener("deviceready", initializeMap, false);

    // device APIs are available
    //
    function onDeviceReady() {
        startWatch();
    }

    // Start watching the compass
    //
    function startWatch() {

        // Update compass every 3 seconds
        var options = { frequency: 3000 };
        view.setRotation(view.getRotation() + Math.PI / 4);
        watchID = navigator.compass.watchHeading(onSuccess, onError, options);

    }

    // Stop watching the compass
    //
    function stopWatch() {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }

    </script>        
    <script type="text/javascript">
    function initializeMap() {
      var rotation = heading.magneticHeading;
      var view = new ol.View2D({
          center: ol.proj.transform([8.82 , 45], 'EPSG:4326', 'EPSG:3857'),
          //rotation: rotation,
          zoom: 4
        })
      var map = new ol.Map({
          target: 'map',
          layers: [ new ol.layer.Tile({
              source: new ol.source.OSM()
              })
          ],
          view: view
      });
      }
    </script>

  </body>
</html>