<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);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.