Handy code for City, State, Zip, Country selector via JS

Today I got a new project to work on the client needs a registration form having Country, City, State and Zip Code including the Geo Location and Latitude. There was a location based searching for the system, so what we needed was to do a full validated geo fields without any kind of errors. I tried to do it via Ajax and so that  it will be the best for validation as well as interactive to the user also.

While searching  I got something which is very handy from geonames. I tried to do API calls to their web services so that I can get whatever details I want from them.

Sample API Call

http://ws.geonames.org/searchJSON?callback=jQ&featureClass=P&style=full&maxRows=12&name_startsWith=Thiruvanantha&_=1320938754165

The result obtained was a JSON string, 

jQ({"totalResultsCount":1,"geonames":[{"alternateNames":[{"name":"তিরুবনন্তপুরম","lang":"bn"},{"name":"ত্রিবানদ্রাম","lang":"bpy"},{"name":"Thiruvananthapuram","lang":"de"},{"name":"Thiruvananthapuram","lang":"en"},{"name":"Thiruvananthapuram","lang":"eo"},{"name":"Thiruvananthapuram","lang":"fi"},{"name":"Thiruvananthapuram","lang":"fr"},{"name":"तिरुअनन्तपुरम्","lang":"hi"},{"name":"Thiruvananthapuram","lang":"id"},{"name":"ティルヴァナンタプラム","lang":"ja"},{"name":"http://en.wikipedia.org/wiki/Thiruvananthapuram","lang":"link"},{"name":"തിരുവനന്തപുരം","lang":"ml"},{"name":"Trivandrum","lang":"nl"},{"name":"Trivandrum","lang":"pl"},{"name":"Thiruvananthapuram","lang":"pt"},{"name":"Thiruvananthapuram","lang":"ro"},{"name":"Тируванантапурам","lang":"ru"},{"name":"तिरुवनंतपुरम","lang":"sa"},{"name":"Thiruvananthapuram","lang":"sv"},{"name":"திருவனந்தபுரம்","lang":"ta"},{"name":"特里凡得琅","lang":"zh"}],"countryName":"India","adminCode1":"13","fclName":"city, village,...","score":28.883577346801758,"countryCode":"IN","lng":76.9166667,"adminName2":"","adminName3":"","fcodeName":"seat of a first-order administrative division","adminName4":"","timezone":{"dstOffset":5.5,"gmtOffset":5.5,"timeZoneId":"Asia/Kolkata"},"toponymName":"Thiruvananthapuram","fcl":"P","continentCode":"AS","name":"Thiruvananthapuram","fcode":"PPLA","geonameId":1254163,"lat":8.4833333,"adminName1":"Kerala","population":784153}]});

This API call can be used as an auto-suggestion for a text field which will be very handy for the developer instead of typing all the city, state, country data to the database.

See a demo here : http://jqueryui.com/demos/autocomplete/#remote-jsonp

You can also use the web services of geonames for geo location extraction,
http://www.geonames.org/export/web-services.html

Locating from Google maps,
http://www.geonames.org/maps/json-googlemaps-example.html

JSON Services,
http://www.geonames.org/export/JSON-webservices.html

GeoNames is mainly using REST webservices.

And finally the AIO,

http://www.geonames.org/export/ws-overview.html

Important:

• The parameter 'username' needs to be passed with each request. The username for your application can be registered here. You will then receive an email with a confirmation link and after you have confirmed the email you can enable your account for the webservice on your account page
• Don't forget to url encode string parameters containing special characters or spaces. (Faq entry on url encoding)
• Use the JSON services if you want to use GeoNames from javascript, as most browsers do not allow to call xml services from ANOTHER server.
• all web services on one table.
• client libraries
• Service Level Agreement is available for our commercial web services.
• Exceptions - error handling

I’m sure that this will be the best for the one who seeks this.