gistfile1.js

<h3>Display Coordinates</h3>
<p id="geo_loc"></p>

<script>
  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    output.innerHTML = '<p>Latitude is ' + latitude + '<br>Longitude is ' + longitude + '</p>';
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };
  
  navigator.geolocation.getCurrentPosition(success, error);

  var output = document.getElementById("geo_loc");
</script>



<h3>Show Coordinates and Map on button click</h3>
<p>
  <button onclick="geoLoc()">Get Coordinates</button>
</p>
<div id="out"></div>

<script>
  function geoLoc() {
    var output = document.getElementById("out");
    if (!navigator.geolocation){
      output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
      return;
    }
    output.innerHTML = "<p>Locating...</p>";
    navigator.geolocation.getCurrentPosition(success2, error2);
  
    function success2(position) {
      var latitude  = position.coords.latitude;
      var longitude = position.coords.longitude;

      output.innerHTML = '<p>Latitude is ' + latitude + '<br>Longitude is ' + longitude + '</p>';

      var img = new Image();
      img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

      output.appendChild(img);
    };

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

</script>