JSFiddle - React, Tailwind, and code Playground

by Newton Anbarasu

HTML

<script src="http://maps.googleapis.com/maps/api/geocode/json?latlng=&lt;latitude&gt;,&lt;longitude&gt;"></script>
<script src="http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884"></script>

<button id="okbutton" >Get your Location</button>

<p id="paragraph"></p>
<h3>Latitude and Longitude</h3>
<p id="position"></p>
<h3>In a form</h3>
<form action="#">
  <div>
    <label for="street">Street:</label>
    <input type="text" name="street" id="street" placeholder="South Court" />
  </div>
  <div>
    <label for="neighborhood">Neighborhood:</label>
    <input type="text" name="neighborhood" id="neighborhood" placeholder="Old Palo Alto" />
  </div>
  <div>
    <label for="city">City:</label>
    <input type="text" name="city" id="city" placeholder="Palo Alto" />
  </div>
  <div>
    <label for="state">State / Province:</label>
    <input type="text" name="state" id="state" placeholder="California" />
  </div>
  <div>
    <label for="zip">ZIP / Postal code:</label>
    <input type="text" name="zip" id="zip" placeholder="94301" />
  </div>
</form>  
<p id="alert"></p>

CSS

form label {
  width: 120px;
  display:inline-table;
  text-align: right;
  padding: 5px;
}
form input {
  padding: 2px 5px;
}
#alert {
  color: red;
}

JavaScript

var alr = document.getElementById("alert");
var par = document.getElementById("paragraph");
var pos = document.getElementById("position");
var str = document.getElementById("street");
var nei = document.getElementById("neighborhood");
var cit = document.getElementById("city");
var sta = document.getElementById("state");
var zip = document.getElementById("zip");

function getLocation() {
  try
  {
    if (navigator.geolocation)
    {
      navigator.geolocation.getCurrentPosition(getInfo);
    }
    else
    {
      alr.innerHTML = "Geolocation is not supported by this browser.";
    }
  }
  catch(e)
  {
    alr.innerHTML = "Geolocation is not supported by this browser.";
  }
}
    
//Shows the position numbers
function showPosition(lat,long)
{
    pos.innerHTML = "Latitude: " + lat + 
    "<br>Longitude: " + long; 
}

//Show the address in a paragraph
function showComplete(data)
{
  par.textContent = "You are in "+data.results[0].address_components[1].long_name+", "+data.results[0].address_components[2].long_name+", "+data.results[0].address_components[4].long_name+", "+data.results[0].address_components[5].short_name+", Postal Code: "+data.results[0].address_components[7].short_name+".";
}

//Fills out the form
function fillForm(data)
{
  str.value = data.results[0].address_components[1].long_name;
  nei.value = data.results[0].address_components[2].long_name;
  cit.value = data.results[0].address_components[4].long_name;
  sta.value = data.results[0].address_components[5].short_name;
  zip.value = data.results[0].address_components[7].short_name;
}

function getInfo(position)
{
  latlng =  position.coords.latitude+","+position.coords.longitude;
  request = new XMLHttpRequest();
  request.open('GET', 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latlng, true);

  request.onload = function() 
  {
    if (request.status == 200 || request.status == 0 )
    {
      // Success!
      data = JSON.parse(request.responseText);
      
      //Call the method...