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.
All you need to do to have the above details, is one line of 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!
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 |
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!
Published: Sun, Apr 13 2014 @ 11:01:30
Back to Blog