<h2>GeoLocation Example</h2>
<p>Keyless access to Google Maps Platform is deprecated. Please use an API key with all your API calls to avoid service interruption. For further details please refer to <a href="http://g.co/dev/maps-no-account" target="_blank">http://g.co/dev/maps-no-account</a></p>
<button id="okbutton" >Get your Location</button>
<h3>In a paragraph</h3>
<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>
form label {
  width: 120px;
  display:inline-table;
  text-align: right;
  padding: 5px;
}
form input {
  padding: 2px 5px;
}
#alert {
  color: red;
}
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', 'https://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 that will handle the address information
      showComplete(data);
      fillForm(data);
      showPosition(position.coords.latitude, position.coords.longitude);
    }
    else
    {
      // We reached our target server, but it returned an error
      alr.textContent = "Google Server Request didn't worked";
    }
  };

  request.onerror = function()
  {
    // There was a connection error of some sort
    alr.textContent = "Google Server Request didn't worked";
  };

  request.send();
}

document.getElementById("okbutton").addEventListener("click", getLocation);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.