Filling Address Fields using HTML5 Geolocation and jQuery

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.

If you enjoyed this post, please consider sharing it with others via the following Twitter or Reddit buttons. I also have a YouTube Channel with free web development videos that you are welcome to watch and/or subscribe. As always, you can reach out to me on Twitter at @elijahmanor. Thanks and have a blessed day!

Reddit