Google autocomplete not working on multiple elements with same class name

Question

I am trying to use Google Autocomplete on multiple class elements but it doesn't seem to be working. It works when I reference one id, as seen here but not with my fiddle. This is my code so far:

$(document).ready(function () {
    addressLookup();
});

function addressLookup() {
    var address = document.getElementsByClassName('form-control booking address');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(address, options);
}

score 3 · Accepted Answer · answered Feb 20 '15 at 20:28

You need to iterate through the collection of elements with the mentioned classes and create.

 var address = document.getElementsByClassName('form-control booking address');

 for(var i=0; i< address.length; i++){
    new google.maps.places.Autocomplete(address[i], options);
 }

Fiddle

score 0 · Answer 2 · answered Feb 20 '15 at 20:25

The problem is in your result from function getElementsByClassName. For AutoComplete you need an element, not an array.

function addressLookup() {
    var address = document.getElementById('pickup');
    var address2 = document.getElementById('destination');
    var options = {
        componentRestrictions: {
            country: 'uk'
        }
    };
    new google.maps.places.Autocomplete(address, options);
    new google.maps.places.Autocomplete(address2, options);
}

Google autocomplete not working on multiple elements with same class name

2 Answers2