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() {
    var address = document.getElementById("addressId");
    var city = document.getElementById("cityId");
    var state = document.getElementById("stateId");
    var zip = document.getElementById("zipId");

    //option for autocomplete
    var option = {types: ['geocode'], componentRestrictions: {country: 'us'}};

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

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        var place = autocomplete.getPlace();

        //parses the result object and populates the other textboxes accordingly
        for(i=0; i<place.address_components.length; i++)
        {
            if(place.address_components[i].types[0] == 'locality')
            city.value = place.address_components[i].long_name;

            if(place.address_components[i].types[0] == 'administrative_area_level_1')
            state.value = place.address_components[i].short_name;

            if(place.address_components[i].types[0] == 'postal_code')
            zip.value = place.address_components[i].long_name;
        }

        /* Here is the PROBLEM */
        address.value = place.name;

    });

However when I try and update the textbox that is being auto completed with a shortened version of the full address (so here just the street number and street name). The value in the full address textbox doesn't change. I've tried using jquery and setting the value attribute with setAttribute() on the textbox. What am I doing wrong?

Can you please show your option object, the one you're using to init the autocomplete? `autocomplete = new google.maps.places.Autocomplete(address, option);` — ElHacker, Dec 18 '12 at 01:37
possible duplicate of [show just the street address in google.maps.event.addListener()](http://stackoverflow.com/questions/13524258/show-just-the-street-address-in-google-maps-event-addlistener) — Dr.Molle, Dec 18 '12 at 02:23

brassmookie · Answer 1 · 2020-01-28T14:27:55.810

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);
}

PleaseWork · Answer 2 · 2012-12-19T17:47:04.153

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.

score 0 · Answer 3 · answered Apr 23 '13 at 09:31

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

score 0 · Answer 4 · answered May 24 '14 at 02:04

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.

Change the value in textbox of a google map autocomplete

4 Answers4

Linked