Show real-time position on map

Question

How to display the current position in real time on the map?

found this code on the internet where displays the markings on the map:

<div id="mapa" style="width:100%;height:100%;"></div>

.

< script >
  $(document).ready(function() {
    $('.sidenav').sidenav();
    $('.modal').modal();
  });


var markersData = [
  <?php do { ?> {
    lat: <?php echo $row_rs['lat']; ?>,
    lng: <?php echo $row_rs['lon']; ?>,
    //nome: "Parque de Campismo Praia da Barra",
    //morada1:"Rua Diogo Cão, 125",
    //morada2: "Praia da Barra",
    //codPostal: "3830-772 Gafanha da Nazaré" // não colocar virgula no último item de cada marcador
  },
  <?php } while ($row_rs = $rs->fetch_assoc()); ?>
];



var x = document.getElementById("demo");
var lat = document.getElementById("lat");
var lon = document.getElementById("lon");


function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "A geolocalização não é suportada por este navegador.";
  }
}

function showPosition(position) {
  //x.innerHTML = "Latitude: " + position.coords.latitude +
  //    "<br>Longitude: " + position.coords.longitude;
  lat.value = position.coords.latitude;
  lon.value = position.coords.longitude;

}

function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Usuário negou a solicitação de geolocalização."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "As informações de localização estão indisponíveis."
      break;
    case error.TIMEOUT:
      x.innerHTML = "A solicitação para obter a localização do usuário atingiu o tempo limite."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Ocorreu um erro desconhecido."
      break;
  }
} <
/script>

<
script src = "map.js" > < /script>

I would like to activate the position has real time of the person, so you can know if it is near any marking.