I have the following javascript code which does google map autoplete 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 autoplete
    var option = {types: ['geocode'], ponentRestrictions: {country: 'us'}};

    //autoplete for address textbox
    autoplete = new google.maps.places.Autoplete(address, option);

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

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

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

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

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

    });

However when I try and update the textbox that is being auto pleted 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?

I have the following javascript code which does google map autoplete 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 autoplete
    var option = {types: ['geocode'], ponentRestrictions: {country: 'us'}};

    //autoplete for address textbox
    autoplete = new google.maps.places.Autoplete(address, option);

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

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

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

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

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

    });

However when I try and update the textbox that is being auto pleted 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?

• javascript
• google-maps-api-3
• autoplete

• Can you please show your option object, the one you're using to init the autoplete? autoplete = new google.maps.places.Autoplete(address, option); – ElHacker Commented Dec 18, 2012 at 1:37
• possible duplicate of show just the street address in google.maps.event.addListener() – Dr.Molle Commented Dec 18, 2012 at 2:23
• added the options variable for autoplete. – PleaseWork Commented Dec 18, 2012 at 16:14

4 Answers 4

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

autoplete = new google.maps.places.Autoplete(address, option);

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

I've found a very temporary solution. It seems if you purposely create an error it'll unbind the google maps autoplete 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.

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

The Autoplete 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 Autoplete 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 Autoplete'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 Autoplete's callback function that sets the text every time it gets fired.