Get a user's State with Geolocation

Question

What's the most efficient way to get a United States user's State? Is HTML5 Geolocation an option without needing to involve google maps?

Answer 1

Here's a couple of examples in JavaScript and JSON (with the help of jQuery) using both the IP lookup method (with the help of IPinfoDB) and the Geolocation API method (with the help of Google Maps API and YQL).

In both examples I'm retrieving the region and country but there are several values you can choose from. Be aware these examples don't do any error handling and here they are edited for brevity, otherwise see the full demo.

IP Lookup in JavaScript

This method is good because it's easy to implement and is fairly accurate at a country level but accuracy drops considerably for anything more specific.

// API key excluded for brevity, see full demo.
var apiurl = 'http://api.ipinfodb.com/v3/ip-city';
$.getJSON(apiurl+'/format=json&callback=?',
    function(data){
        $("h3#location").html(data.regionName + ", " + data.countryName);
    }
);

Geolocation API

Although by no means perfect, this method is as accurate as it gets. User is prompted to share geolocation details which may reduce usage.

navigator.geolocation.getCurrentPosition(function(pos){
    $.getJSON(apiurl+'/format=json&callback=?',
        function(data){
            var regionName = data[...]AdministrativeAreaName;
            var countryName = data[...]CountryName;
            $("h3#location").html(regionName + ", " + countryName);
        }
    );
});

In there you'll see I used the Google Maps API v3 by way of YQL so that a JSON callback is possible.

Full demo: http://jsfiddle.net/ZjXXh