JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>

JavaScript

function geocodeCallback(content) {
    //returning JSON
    document.getElementById('out').innerHTML += JSON.stringify(content);
}
function reverseGeocode(lat,lng){
    //reverse geocode via openStreetMap (messy use of jsonp)
    var script = document.createElement('script');
    script.src = 'http://nominatim.openstreetmap.org/reverse?format=json&lat='+lat+'&lon='+lng+'&zoom=18&addressdetails=1&json_callback=geocodeCallback';
    document.body.appendChild(script);
}

//example geocoding from https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
function geoFindMe() {
  var output = document.getElementById("out");
    output.innerHTML = "";

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;
    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';      
    reverseGeocode(latitude,longitude);//added this      
    var img = new Image();
    img.src = "https://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
    output.appendChild(img);      
  };
  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };
  output.innerHTML = "<p>Locating…</p>";
  navigator.geolocation.getCurrentPosition(success, error);
}