Geolocation Rendering issue

I want to get the geolocation of the user everytime when he clicks it. Here is the code

<script type="text/livescript">
  var x = document.getElementById("demo");
  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.watchPosition(showPosition);
      } else {
          x.innerHTML = "Geolocation is not supported by this browser.";}
      }

  function showPosition(position) {
    //  x.innerHTML="Latitude: " + position.coords.latitude +
    //  "<br>Longitude: " + position.coords.longitude;
      var latitude = document.getElementById('latitude');
      var longitude = document.getElementById('longitude');
      latitude.value=position.coords.latitude;
      longitude.value=position.coords.longitude;
  }
  </script>

Calling using Button

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times; 
</button>
    <h4 class="modal-title">Check IN Details</h4>
  </div>

When i click on the button for the first time browser asks for the Allow location popup and renders the lat/long, and i am displaying them in the textbox. And there will be one location icon that would be generated in the URL saying this website is using the location

When i click again on the button to get the location it hangs, I mean i need to close the browser and click a button to get lat/long.

In the second instance, it is failing to get the location. There might be some refresh functions which would clear the last lat/long and get new location based on the place.

Please help me out.

via Chebli Mohamed