GPS Marker Log

<!DOCTYPE HTML>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script type="text/javascript">
    var watchID;
    var geoLoc;
    var latitude;
    var longitude;

    function showLocation(position) {
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
      var output=document.getElementById("output");
      output.innerHTML="Latitude : " + latitude + "<br> Longitude: " + longitude;
    }

    function errorHandler(err) {
      if(err.code == 1) {
        alert("Error: Access is denied!");
      }else if( err.code == 2) {
        alert("Error: Position is unavailable!");
      }
    }
    function getLocationUpdate(){

       if(navigator.geolocation){
          var options = {enableHighAccuracy:true,maximumAge:30000,timeout:27000};
          geoLoc = navigator.geolocation;
          watchID = geoLoc.watchPosition(showLocation, errorHandler, options);
       }else{
          alert("Sorry, browser does not support geolocation!");
       }
    }

    function log(){
      var marker = $("#marker").val();
      $("#output2").append(marker + ": ");
      $("#output2").append(latitude + "," + longitude);
      $("#output2").append("<br>");

      localStorage.greenway = $("#output2").html();

      var info = marker + "|" + latitude + "|" + longitude;
      $.post( "add.php", { info: info } )
        .done(function( data ) {
          console.log(data);
        });

      $("#marker").val(+marker + 1);
    }

    $(document).ready(function(){
      getLocationUpdate();
      $("#output2").html(localStorage.greenway);
    });

  </script>
<html>
<body>
    <input type="number" id="marker"></input>
    <input type="button" onclick="log();" value="LOG"/>
    <div id="output"></div>
    <hr>
    <div id="output2"></div>
</body>
</html>