Edit in JSFiddle

var pos, current = 0, wpid = true;
output = document.querySelector( 'ul' );
navigator.geolocation.getCurrentPosition( 
  addto, 
  geoerror, 
  { enableHighAccuracy: true, timeout: 27000 } 
);

function geoerror( error ) {
  var errors = [ 'none', 'permission denied', 'position unavailable', 
                 'timeout' ];
  output.innerHTML = '<li>Error: ' + errors[ error.code ] + '</li>';
}

function addto( o ) {
  ++current;
  var str = '' +
  '<li>Reading #: <span>' + current + '</span></li>' +
  '<li>Timestamp: <span>' + o.timestamp + '</span></li>' +
  '<li>Coordinates:<ul>' +
  '<li>Accuracy: <span>' + o.coords.accuracy + '</span></li>' +
  '<li>Altitude: <span>' + o.coords.altitude + '</span></li>' +
  '<li>AltitudeAccuracy: <span>' +o.coords.altitudeAccuracy + '</span></li>' +
  '<li>Heading: <span>' +o.coords.heading + '</span></li>' +
  '<li>Latitude: <span>' +o.coords.latitude + '</span></li>' +
  '<li>Longitude: <span>' +o.coords.longitude + '</span></li>' +
  '<li>Speed: <span>' +o.coords.speed + '</span></li>' +
  '</ul></li>';

  if( o.address ) {
    str+=''+
    '<li>Address:<ul>' +
    '<li>City: <span>' + o.address.city + '</span></li>' +
    '<li>Country: <span>' + o.address.country + '</span></li>' +
    '<li>CountryCode: <span>' +o.address.countryCode + '</span></li>' +
    '<li>County: <span>' +o.address.county + '</span></li>' +
    '<li>Postal Code: <span>' +o.address.postalCode + '</span></li>' +
    '<li>Premises: <span>' +o.address.premises + '</span></li>' +
    '<li>Street: <span>' +o.address.street + '</span></li>' +
    '<li>Street Number: <span>' +o.address.streetNumber + '</span></li>' +
    '</ul></li>';
  }
  output.innerHTML = str;
}
var b = document.querySelector( 'button' );

b.addEventListener( 'click', function( ev ) {
  if( this.on ) {
    this.innerHTML = 'Start watching position';
    navigator.geolocation.clearWatch( wpid );
    this.on = false;
  } else {
    this.innerHTML = 'Stop watching position';
    wpid = navigator.geolocation.watchPosition( 
      addto, 
      geoerror,
      { enableHighAccuracy : true, timeout : 27000 }
    );
    this.on = true;
  }
  ev.preventDefault();
}, false );

  <header><h1>Geolocation demo</h1></header>
   <output>
   <ul></ul>
   </output>
   <button>Start watching position</button>
 

  *{margin:0;padding:0;font-size:15px;font-family:helvetica,arial,sans-serif}
   footer,section,header{display:block;}
   ul{padding:0.5em 1em;}
   output{background:#369;color:#fff;width:300px;display:block;margin:1em;
     border-radius:10px;padding:10px}
   li{font-weight:bold;padding:5px 0;list-style:none}
   li li{padding-top:0;}
   button{margin-left:50px;width:250px;display:block;}
   li span{font-weight:normal}
   h1{color:#000;margin:10px 0;text-align:center;width:350px;font-family:futura,arial,sans-serif;text-transform:uppercase;}
   footer{position:absolute;bottom:5px;right:5px;}
   footer p,footer a{font-size:10px;color:#000}