Change the value in textbox of a google map autocomplete

Question

I have the following javascript code which does google map autocomplete on different input textboxes that are parts of an address.

function startAutoComplete         


        

Answer 1

The simplest way I've found to programmatically change the value of an Autocomplete input is to reinitialize the input field.

autocomplete = new google.maps.places.Autocomplete(address, option);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   // populate your other text fields
   ...
   // change the value of your autocomplete
   address.value = place.name;
   // reinitialize with new input value
   autocomplete = new google.maps.places.Autocomplete(address, option);
}

Answer 2

The Autocomplete object has a few not obvious event listeners. The reality is that when you run your code, it actually does change the value, and then the Autocomplete objects changes it back really fast! To test this, add alert(); after your address.value = place.name; line. You can cajole it to keeping your value if you add a setTimeout() that sets the value with a 1ms delay. But when you leave the field, the Autocomplete's blur event triggers, and your address is overwritten again. You can solve this issue with one line:

address.addEventListener('blur', function() { address.value = place.name; });

This takes care of the first case as well, so you won't even need to add a setTimeout(). Replace the line you have for setting the value with this event listener, and it will replace the Autocomplete's callback function that sets the text every time it gets fired.

Answer 3

how about cloning the element and then replacing with the same and then call initialze again.

Well something like this. This worked for me in the past.

$("#Id").replaceWith($("#Id").clone());
initialize();

here initailize is the method that is called when the dom loads google.maps.event.addDomListener(window, 'load', initialize); in your case it may be different

Answer 4

I've found a very temporary solution. It seems if you purposely create an error it'll unbind the google maps autocomplete from the original text box and reveal your original textboxes with the updated value. Not really a solution but it's a start

//Created this variable that stores the pac-container
var element = document.getElementsByClassName("pac-container");

//inside the addListener() function I added this to create a DOM error
element[0].childNodes[0].childNodes[0].removeChild();

The javascript throws an error but it at least allows me to put in what I want in the textbox using '.value'

Again not a solution but a start. I hope we find a better solution.