Geolocation Live ExampleEdit

by Jonathan Smith

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation -->
<p>
  <button onclick="start()">
    start
  </button>
</p>
<p><button onclick="showMe()">Show my location</button></p>
<div id="out"></div>

CSS

body {
  padding: 20px;
  background-color:#ffffc9
}

p { margin : 0; }

JavaScript

var output = document.getElementById("out");
var latitude = '';
var longitude = '';
    
function start() {
  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
  	alert('position updated');
    latitude  = position.coords.latitude;
    longitude = position.coords.longitude;
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "<p>Locating…</p>";

	gpsOptions = {
                enableHighAccuracy: true,
                timeout: 5000,
                maximumAge: 5000
            };
  navigator.geolocation.watchPosition(success, error, gpsOptions);
}

function showMe() {
	output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
}