Google Map Autocomplete on Multiple Fields

Hello,

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.

This is private content

Thanks in advance,
Melvins

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:


https://jsfiddle.net/upsidown/42usv81j/

https://jsfiddle.net/rdawkins/69Luo215/2/


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: http://drive4dealers.com/index.php?option=com_chronoforms5&chronoform=AvailableDriversCFv5MapTest
Can someone point me in right direction to get two fields with google maps autocomplete.
Thanks,
Melvins