W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  let latlon = position.coords.latitude + "," + position.coords.longitude;
  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

</body>
</html>

​x
 
<!DOCTYPE html><html><body><h1>HTML Geolocation</h1><p id="demo">Click the button to get your position.</p>​<button onclick="getLocation()">Try It</button>​<div id="mapholder"></div>​<script>const x = document.getElementById("demo");​function getLocation() {  if (navigator.geolocation) {    navigator.geolocation.getCurrentPosition(showPosition, showError);  } else {    x.innerHTML = "Geolocation is not supported by this browser.";  }}​function showPosition(position) {  let latlon = position.coords.latitude + "," + position.coords.longitude;  let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="  +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";  document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";}//To use this code on your website, get a free API key from Google.//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp​function showError(error) {  switch(error.code) {    case error.PERMISSION_DENIED:      x.innerHTML = "User denied the request for Geolocation."      break;    case error.POSITION_UNAVAILABLE:      x.innerHTML = "Location information is unavailable."      break;    case error.TIMEOUT:      x.innerHTML = "The request to get user location timed out."      break;    case error.UNKNOWN_ERROR:      x.innerHTML = "An unknown error occurred."      break;  }