Code tip: Adding a google address field

  • Font size: Larger Smaller
  • Hits: 10989
  • Print

With this code tip we'll show you how to transform a default text input field into a google helper field that will search valid addresses and show options while users are typing, as if they were using the google maps address bar.

This feature is available using google maps library 'places'. First step is to get a valid google key that will allow you to use the api. You can find more information here:

Getting an API key

Now you can create your text input field at your calculator that will be used as address helper. You only need to add one field (we'll call it 'useraddress'), and type it as 'text'. Insert it at your form as usual, including ##useraddress## at your form layout.

And the last step is to turn this default field into a google helper, you need to add this code at the js tab 'write directly at html page':

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&libraries=places" type="text/javascript"/>

replacing the xxxxxx for your real Google api key.

and apply the helper to our field, using this code at the 'executed on loaded page'

var inputid=CB("input[fldname=useraddress]").attr('id');

var input=document.getElementById(inputid);

var options = {};
var autocomplete=new google.maps.places.Autocomplete(input,options);

You can add some configuration options to the field, for example restricting the address search only for UK:

var inputid=CB("input[fldname=useraddress]").attr('id');

var input=document.getElementById(inputid);

var options = { componentRestrictions: {country: "uk"}};
var autocomplete=new google.maps.places.Autocomplete(input,options);

You'll see at your front end your default text field has turned into an address helper that will be showing options as the user types inside.

Last modified on
Trackback URL for this blog entry.

Lo que nuestros clientes opinan de nosotros