HTML5 geolocation zip code

A very common question you see coming up in online forums and discussion boards is regarding html5 geolocation zip code. Seems like many people want to leverage the new HTML5 geolocation API in order to retrieve a user's zip code. 

A primer on HTML5 Geolocation API

Geolocation just means coordinates. :) All modern mobile devices have a GPS module which allows them to have a very accurate reading (depends on direct sky view) of the current GPS coordinates and pinpoint location. While this is a very useful feature, I believe we can understand how controversial it could be when it comes to privacy. For this reason, any time a user's geolocation is requested, the device itself asks for permission before even starting the procedure. Delegating the device itself, rather than the developer to ask for permission is best way of ensuring there are no sketchy things going on.

Geolocation API Support

IE	FIREFOX	SAFARI	CHROME	OPERA	IPHONE	ANDROID
9.0+	3.5+	5.0+	5.0+	10.6+	3.0+	2.0+

Geolocation Result

This is the information you will have access to after calling the HTML5 Geolocation API, assuming the user granted permission:

Property	Type	Notes
coords.latitude	double	decimal degrees
coords.longitude	double	decimal degrees
coords.altitude	double or null	meters above the reference ellipsoid
coords.accuracy	double	meters
coords.altitudeAccuracy	double or null	meters
coords.heading	double or null	degrees clockwise from true north
coords.speed	double or null	meters/second
timestamp	DOMTimeStamp	like a Date() object

All you need to do to have the above details, is one line of code:

navigator.geolocation.getCurrentPosition(success,error,options);

HTML5 geolocation zip code

As you can see from the above table, there is no reference to zip code. This is not an error. In order to identify the user's zip code, you need to pair the coordinates with a database of zip codes. You can certainly maintain such a database on your own but I doubt you want to go down this route, especially considering how easy it is using google services. After including the main google maps javascript file, you can leverage the powerful google Geocoder service. Provide the coordinates returned by the HTML5 Geolocation API and you will have the full address associated. This process is called reverse geocoding.

HTML5 geolocation and reverse geocoding example

1. Include the google maps main script in your HTML:

<script type='text/javascript' src="http://maps.googleapis.com/maps/api/js"></script>
Ideally add your API key and sensor=true.

2. Retrieve the user's coordinates:

navigator.geolocation.getCurrentPosition(success, error, {enableHighAccuracy:true,maximumAge:600000, timeout:10000});

3. Use coordinates to grab zip code

geocoder = new google.maps.Geocoder();
var win=function(position){
 mylat=position.coords.latitude;
 mylng=position.coords.longitude;
 var latlng = new google.maps.LatLng(mylat, mylng);
 geocoder.geocode({'latLng': latlng}, function(results, status) {
 if (status == google.maps.GeocoderStatus.OK) {
 alert("The user's zipcode is "+results[0].address_components.postal_code);
 }});
 };
var fail=function(e){alert("GPS Failed");};

Additional notes

In case there is no GPS component in the device, if the user grants permission, a technique called triangulation will be used to provide the best estimate of location. Although it might not be very accurate, it's certainly better than nothing and enough to identify the zip code.
If the user denies permission to identify the accurate location, you might still have good chances by leverage the ip address. There are only services that allow you to do this although the good ones aren't free, as usual… :)
Hope it helps!

Back to Blog