Buy Now
Sign in

Google Map Autocomplete on Multiple Fields

melvins138 , December 04 2017
melvins138

I posted this on "How To" but I figured it may be better here:

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.

Private content
The content here is visible only for authorized users.


Thanks in advance,
Melvins