Form with GeoLocation

Sheldon Led
Jul 25, 2014 · 2 min read

How about automatically fill address information in your form just by getting Geolocation of user?!

Every day we fill out forms on the web, and we know it sucks. For example, why we always have to fill out address information? Why doesn’t the computer simply get my location God knows how!? Some websites made an improvement by getting part of the address by the zip code, but, HTML5 GeoLocation can really improve this user experience.

I saw a Portuguese talk about web mobile best pratices, and I learned that it could be a good idea to fill the client location form using geolocation. You can learn more about HTML5 GeoLocation in MDN, and you will know that it just gives us the geographic coordinates .

HTML5 Geolocation can provide the geographic coordinates, and Google Geocoding API can provide the rest of information. You look at Can I Use for the GeoLocation Browser Suport, but for privacy reasons, the user is asked for permission to report location information, so it’s the user’s decicion, automatically fill or not.

Once you have the user’s Geographic Coordinates, you can send a request to Google Geocoding API to get the real information, like city, state and zip code. These information may be wrong, so it’s important to let the input editable. The URL of Google API we’ll use is the Reverse Geocoding, and it’s like that:

http://maps.googleapis.com/maps/api/geocode/json?latlng=<latitude>,<longitude>

The <latitude> and <longitude> must be replaced with real numbers like that:

http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884

Ok, “talk is cheap show me the code”! I made a pen with an example you can use in your form, you can see it in action below:

Now, I just want everyone (even me) to start using this because it is a nice improvement and saves our time.

Thanks for reading! If you enjoyed this post, hit the heart below! It makes this information available for your followers. I’m Sheldon Led, more information about me in my first post.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store