Buy Now
Sign in

Google Map Autocomplete on Multiple Fields

melvins138 , November 27 2017
melvins138
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.

    The content here is visible only for authorized users.


    Thanks in advance,
    Melvins
    melvins138

    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