Form with GeoLocation
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.
