The Where Am I and Postal Address apps using the HTML5 Geolocation service and Google Maps’ Geocoder service to determine your accurate physical location up to the zip code.
The HTML5 geolocation service returns the current longitude and latitude coordinates which are then passed to Google Geocoder for determining the actual geographic location including the street address and the pin code.
This can be used by shopping websites to serve store results that are nearest to the visitor’s current location, by banks for showing the location of nearest ATMs, gas stations and so on.
HTML - We are including the jQuery library and the Google Maps API for geocoding the location.
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,visualization&sensor=false"></script>
<a href="#" id="showMyLocation">Where Am I</a>
<div id="location">Postal Address</div>
<div id="zipcode">Zip Code</div>
</body>
</html>
When the user click the Where Am I link, the browser ask for permissions to share his or her location with the website. If they say Allow, the co-ordinates are passed to the Google Maps API for determining the physical address.
$(function () {
$('#showMyLocation').click(function (event) {
event.preventDefault();
$(this).html('Determining address...');
navigator.geolocation.getCurrentPosition(function (position) {
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
geocoder.geocode(
{
latLng: latLng,
},
function (results, status) {
for (var i = 0; i < results[0].address_components.length; i++) {
var address = results[0].address_components[i];
if (address.types[0] == 'postal_code') {
$('#zipcode').html(address.long_name);
$('#location').html(results[0].formatted_address);
$('#showMyLocation').hide();
}
}
}
);
});
return false;
});
});