Giacomo Balli profile picture
Giacomo Balli
The Mobile Guy

Over two decades of experience at your service.
I help business owners make better decisions.

Free 20-Minute Consultation LinkedIn

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!

#geolocation, #html5, #phonegap
Published: Sun, Apr 13 2014 @ 11:01:30
Back to Blog