GeoIP technology allows us to detect where a specific user is located based on their IP address. With MaxMind’s new JavaScript API it is easy to auto-fill any location form fields to make processes easier for users. This avoids one of the common user interface design mistakes we often encounter: the use of poor defaults.
Sample
This is a very basic but common example of how you can use this in your projects.
How it’s done
You’ll need to start by linking to a copy of jQuery and the MaxMind GeoIP JavaScript API.
If for some reason the MaxMind data service goes down, the first field will be the default. Not the end of the world. It’s estimated that services uptime is about 99.95%.
Next you’ll need an XHTML form that contains a state select (or dropdown) field. Here’s a basic one I’ve recently used in a prototype.
Next you’ll need to add the jQuery function/process itself to make everything work. This can be included inline in the <head> of the document or externally, it doesn’t matter.
JavaScript / jQuery
$(function(){
var $state = geoip_region();
$('#states option[value='+$state+']').attr('selected','selected');
});That’s it!
Easy as pie. Hope this helps, I know I’m pretty excited about it.
Resources
Meet the Author
