Reverse Geocoding
Click the button to get your current address.
Don't worry when this page requests location information; I'm not trapping any data. Take a look at this page's source code if you're afraid to reveal your location; there's no data trapping code. Well, if I'm not doing this to get your location, why am I doing it? I've been using using html5 for a while now too create my web pages; html5 is the latest and greatest version of html (HyperText Markup Language - the lingua franca of the web). I use html5 to create music and video players on my web pages. I also use html5 rules for using JSON and AJAX (if you're a web developer then you know what I'm talking about, otherwise you can look up these terms if you have a burning desire - not really all that important). ..., but I'm aware of some neat html5 features I've never used, so I decided to visit http://www.w3schools.com/ and find out how to use these features. The first thing I found out was that html5 can tell you where your page visitors are located! The little demo above displays your current address (home address, if you're home), and is the first fruit from my visit to http://www.w3schools.com/ (not an attempt to find out where you are located).
You can view this page's source code too see how I can get your address, but thought I'd be nice enough to display it here:
<!DOCTYPE html>
<html>
<head>
<title>Reverse Geocode Example</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>
<p>Click the button to get your current address.</p>
<button onclick="getLocation()">Try It</button>
<br /><br />
<div id="address"></div>
<script>
var addrDiv = document.getElementById("address");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
addrDiv.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position)
{
var geocoder = new google.maps.Geocoder();
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
geocoder.geocode({ 'latLng': point }, function (results, status)
{
// This is checking to see if the Geocode Status is OK before proceeding
if (status == google.maps.GeocoderStatus.OK)
{
console.log(results);
var formatted_address = (results[0].formatted_address);
addrDiv.innerHTML = formatted_address;
}
else
{
addrDiv.innerHTML = "failed to get address";
}
});
}
</script>
</body>
</html>
If you want to figure out how write your own reverse geolocation code (geolocation converts a physical address to latitude and longitude coordinates, and this is what you can now do with html5) you need to visit these web sites: http://www.w3schools.com/html/html5_geolocation.asp , http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_map_script (this page shows how to do reverse geolocation using a Google map, but the logic is the same as what I used here), and https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse I also looked at several web pages where people showed their examples of geocoding and reverse geocoding; not as helpful as the links I just gave.
I've tried this page on IE 11, Opera 26, and Chrome 39. It showed up OK in all of these browsers, but in Opera it stopped working after several reloads (haven't looked into this, yet - most people use IE and Chrome, anyway). As of this writing I haven't tried FireFox yet, but anything that works in Chrome will usually work in FireFox.