Filling Address Fields using HTML5 Geolocation and jQuery

29. June 2010

I saw an interesting tweet by Remy Sharp (@rem) the other day that sparked my interest.

47b091843184dc342cdd0f26c4943ed0

So, I proceeded to research the Geolocation API and look up various web services that allowed me to utilize JSONP requests from jQuery.

Here is some pseudocode to describe what I came up with…

if (Your browser supports the GeoLocation API) { 
  if (Geolocation data contains address) { 
    Use address to populate form (Firefox) 
  } else { 
    Use Long/Lat to get address from web service & populate form (Chrome) 
  }
} else {
  Use IP address to get address from web service & populate form (IE)
}

 

cooltext439925164

Note: You may notice depending on the browser not all of the fields are being filled out. This is because of the web services that I am utilizing are lacking one or more fields or vary depending on your location. If I find a better web service then I’ll update the script.

Blog


Comments

Vince
Vince
6/29/2010 7:09:13 PM #
Very creative use of geolocation API's. Also discovered jsFiddleO...what a great tool!
6/29/2010 10:50:57 PM #
For what it's worth, Google provides example code for geolocation that makes use of both navigator.geolocation and google.gears: code.google.com/.../basics.html#Geolocation
I'm not sure how many more users will be able to provide geolocation above the native browser support, but it can't hurt.

PS: Long time follower on Twitter, listener of The Official jQuery Podcast, keep up the great work!
6/29/2010 11:16:33 PM #
Vince & Tony,

Glad you like the creative use of Geolocation. I was not aware of the Google sample code. Yeah, I'd like to massage the above Revealing Module into a jQuery Plugin so that it can be more accessible to people. Thanks for your feedback!

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading



Olark Livehelp