jsFiddle

• Run again
• Edit this fiddle

• JavaScript
• Resources
• HTML
• CSS
• Result

    
var geoLocateAddress = function () {
    var public = {};
    
    public.init = function() {
        public.initEventHandlers();
    };
    
    public.initEventHandlers = function() {
        $("#findMyLocation").click(function() {
            if (!navigator.geolocation) {
                console.log("GeoLocation not supported, using IP");
                public.loadAddressByIP();
            }
            else {
                console.log("Using your browser's GeoLocation API");
                navigator.geolocation.getCurrentPosition(
                    public.loadAddressByGeolocation);
            }
        });    
    };
    
    public.loadAddressByGeolocation = function(position) {
        console.dir(position);
    
        if ("undefined" !== typeof position.address) {    
            public.updateAddressFields({
                city : position.address.city,
                state: position.address.region,
                zipCode: position.address.postalCode,
                countryCode: position.address.countryCode
            });
        } else {
            console.log("Your browser only returns Long/Lat");      
            public.loadAddressByLngLat(position);
        }    
    };    
    
    public.loadAddressByLngLat = function(position){
        var data = {
            lat : position.coords.latitude,
            lng : position.coords.longitude
        };
        var url = "http://ws.geonames.org/findNearestAddressJSON";
        $.ajax({
            url: url,
            dataType: 'jsonp',
            data: data,
            success: function(data, textStatus, xhr) {
                public.updateAddressFields({
                    city : data.address.placename,
                    stateCode: data.address.adminCode1,
                    zipCode: data.address.postalcode,
                    countryCode: data.address.countryCode
                });
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log(textStatus);
            }
        });
        
        return false;
    };
          
    public.loadAddressByIP = function() {
        $.getJSON("http://www.geoplugin.net/json.gp?jsoncallback=?", 
            function (data) {
                public.updateAddressFields({
                    city : data.geoplugin_city,
                    stateCode: data.geoplugin_regionCode,
                    countryCode: data.geoplugin_countryCode
                });        
            });  
    };
    
    public.updateAddressFields = function(address) {
        console.dir(address);
        
        console.log('City: ' + address.city);
        $("#city").val(address.city);
        
        var stateCode = address.stateCode;
        if (!stateCode) {
            stateCode = $("#state option:contains('" + 
                address.state + "')").attr('value');            
        }
        console.log('State: ' + stateCode);
        $("#state").val(stateCode);
        
        console.log('Zip: ' + address.zipCode);
        $("#zip").val(address.zipCode);
        
        console.log('Country: ' + address.countryCode);
        $("#country").val(address.countryCode);
    };    

    return public;
} ();

geoLocateAddress.init();

<ul>
    <li>
        <label for="city">City</label>
        <input id="city" type="text" placeholder="City" autofocus />
    </li>
    <li>
        <label for="state">State</label>
        <select id="state" placeholder="State"> 
            <option value="" selected="selected">Select a State</option> 
            <option value="AL">Alabama</option> 
            <option value="AK">Alaska</option> 
            <option value="AZ">Arizona</option> 
            <option value="AR">Arkansas</option> 
            <option value="CA">California</option> 
            <option value="CO">Colorado</option> 
            <option value="CT">Connecticut</option> 
            <option value="DE">Delaware</option> 
            <option value="DC">District Of Columbia</option> 
            <option value="FL">Florida</option> 
            <option value="GA">Georgia</option> 
            <option value="HI">Hawaii</option> 
            <option value="ID">Idaho</option> 
            <option value="IL">Illinois</option> 
            <option value="IN">Indiana</option> 
            <option value="IA">Iowa</option> 
            <option value="KS">Kansas</option> 
            <option value="KY">Kentucky</option> 
            <option value="LA">Louisiana</option> 
            <option value="ME">Maine</option> 
            <option value="MD">Maryland</option> 
            <option value="MA">Massachusetts</option> 
            <option value="MI">Michigan</option> 
            <option value="MN">Minnesota</option> 
            <option value="MS">Mississippi</option> 
            <option value="MO">Missouri</option> 
            <option value="MT">Montana</option> 
            <option value="NE">Nebraska</option> 
            <option value="NV">Nevada</option> 
            <option value="NH">New Hampshire</option> 
            <option value="NJ">New Jersey</option> 
            <option value="NM">New Mexico</option> 
            <option value="NY">New York</option> 
            <option value="NC">North Carolina</option> 
            <option value="ND">North Dakota</option> 
            <option value="OH">Ohio</option> 
            <option value="OK">Oklahoma</option> 
            <option value="OR">Oregon</option> 
            <option value="PA">Pennsylvania</option> 
            <option value="RI">Rhode Island</option> 
            <option value="SC">South Carolina</option> 
            <option value="SD">South Dakota</option> 
            <option value="TN">Tennessee</option> 
            <option value="TX">Texas</option> 
            <option value="UT">Utah</option> 
            <option value="VT">Vermont</option> 
            <option value="VA">Virginia</option> 
            <option value="WA">Washington</option> 
            <option value="WV">West Virginia</option> 
            <option value="WI">Wisconsin</option> 
            <option value="WY">Wyoming</option>
        </select>    
    </li>
    <li>
        <label for="zip">Zip</label>
        <input id="zip" type="text" placeholder="Zip" />
    </li>
    <li>
        <label for="country">Country</label>
        <input id="country" type="text" placeholder="Country" />
    </li>
    <li>
        <label for="findMyLocation">&nbsp;</label>
        <button id="findMyLocation">Find My Location</button>
    </li>
</ul>

ul {
    margin-bottom: 3px;
    display: block;  
}

ul li {
    list-style: none;
    clear: left;
    display: block;
}

ul li > label {    
    float: left;
    width: 100px; 
    text-align: right; 
    display: block;
}

ul li > input, ul li > select, ul li > button
{
    text-align: left; 
    margin-left: 25px;       
    display: block;
    float: left;
}