Buy Now
Sign in

Google Map Autocomplete on Multiple Fields

melvins138 , November 27 2017

I have a form that contains a starting address and an ending address, for a trip.

I am trying to figure out the best way to get each field to autocomplete the address from google.

Here is how I have the form set up:
1) Text Field for "Starting Location" with ID of starting_location
2) Google Address widget. Google API in place, Address field ID: starting_location, Formatted result address field ID: starting_location
3) Text Field for "Destination Location" with ID of destination_location
4) Google Address widget. Google API in place, Address field ID: destination_location, Formatted result address field ID: destination_location

Now I can start typing in "destination_location" and the address will begin to auto complete. But, it will not start to autocomplete on "starting_location"

If I delete 4) Google Address widget, then the "starting_location" begins to work.

Can I have two text fields autocomplete an address?

Also, while the two text fields 1) & 3) are set up exactly the same, here is the code generate:

<div class="field "><label for="starting_location">Starting Location</label>
<input data-events="
  • " placeholder="street, city, state, zip" name="starting_location" id="starting_location" value="" type="text"></div>

  • and

    <div class="field "><label for="destination_location">Destination Location</label>
    <input data-events="" placeholder="street, city, state, zip" name="destination_location" id="destination_location" value="" type="text" autocomplete="off"></div>

    For some reason, the "destination_location" has autocomplete="off". I'm not sure why.

    The content here is visible only for authorized users.

    Thanks in advance,

    I wanted to bump this, as I have not found a solution that will work on ChronoForms.

    I have tried using a custom code field and using working code from these two jsfiddles:

    I'm not sure what I am doing wrong or why these will not work on ChronoForms V5 or V6.

    A version of the CFv5 form (using the first linked jsfiddle) can be viewed at:

    Can someone point me in right direction to get two fields with google maps autocomplete.