#Geo - Prefill Address or Street using Google API

Follow

Matthew Huska

September 11, 2014 12:37

One way to prefill street names, street addresses, country, or anything that can be geocoded, is to call the Google Maps API.

The following functions show how to get an address number and a street name. The third function is what calls the Google reverse geocoding URL and receives the JSON response.

You must obtain a Google API key and insert it where you find [API_KEY] in the code.

To apply it to a form, simply put the following code in the page-level javascript and then call one of the functions (ex. "getStreetName(location1.latitude, location1.longitude)") in the dynamic value of the element you want prefilled.

Open code snippet on Github

 

3

• 

  Tony Ruth September 11, 2014 12:39

  This is great Matthew, thanks for sharing! It would be interesting to hear all the different use cases around this.

  0

  Comment actions Permalink
• 

  jzhang September 13, 2014 13:20

  thanks

  0

  Comment actions Permalink
• 

  Brett October 31, 2014 20:49

  Thanks Matthew, I'm new to the iform format. How do you link the Java script at the form level to the element. ie. can you please explain "getStreetName(location1.latitude, location1.longitude)") in the dynamic value of the element you want prefilled. What input to you attache the dynamic value to?

  0

  Comment actions Permalink
• 

  Hamish May 25, 2015 04:31

  Thanks Matthew - this is excellent. I've been trying to get it going for Android as well as iOS (which is working well) - I'd thought it was because Android didn't provide .latitude and .longitude - but that's wrong so it seems to be around XMLHttpRequest not work - any one with any ideas??

  1

  Comment actions Permalink
• 

  Matthew Huska May 26, 2015 12:59

  It appears this is a known issue with Android. See the following article... http://www.kinvey.com/blog/107/how-to-build-a-service-that-supports-every-android-browser.

  We work exclusively with iOS devices so I have no proven solution.

  1

  Comment actions Permalink
• 

  Hamish May 29, 2015 11:47

  Hi Matthew - thanks for response. In testing the code on Android the function call fails at this point " xmlHttp = new XMLHttpRequest();" it never gets past this point - IE before it sends the request. So not sure if it is the issue you point to. We have about 40-50% Android users so will keep trying to figure out where it fails.

  1

  Comment actions Permalink
• 

  Jonathan Hsu July 19, 2016 20:11

  I found the functions would break the field if that specific data point (normally it was the zip code) was not applicable.  I fixed up the functions a bit and also added a getFormattedAddress() function.

  https://gist.github.com/jhsuZerion/4f9a9bb44f7021f792a71b6ca6ac934a 

  0

  Comment actions Permalink
• 

  Brant June 05, 2017 23:14

  I'm having some trouble getting this to function properly.  I pasted the code into the page level javascript of my form, inserted my Google API key, and tried calling on the functions in various form elements, but nothing seems to populate in the form.  Could I be missing something?

  0

  Comment actions Permalink
• 

  Penny Lau October 17, 2017 02:38

  I know this is a very late reply and we apologize, but for those folks who were struggling with making API calls work on Android, unfortunately Android JS library doesn't support XmlHttpRequest. Android JS is handled by Android webkit and you will be able to find all the classes supported: https://developer.android.com/reference/android/webkit/package-summary.html

  Penny

  0

  Comment actions Permalink

Please sign in to leave a comment.