javascript - jQuery and google maps auto complete

Question

I have Google Maps Autocomplete working on severalinput tags like this:

 <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" />

To enable Google Maps auto-complete, I have the following code:

//https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
$(document).ready(function () {

    autocomplete = new google.maps.places.Autocomplete((document.getElementById('pac-input')), { types: ['geocode'] });

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        MyFunc();
    });

});

And then, in the MyFunc() function I do what I need:

function MyFunc() {
    var fullAddress = autocomplete.getPlace().formatted_address;
    var input = $(this);
    //stuff that uses input
}

This code however, has two problems:

• The first is that i am using an Id, to affect multiple input boxes (I have many input fields). I tried selecting by class but it fails with error ′undefined′. How can I apply that function to a collection of input fields?
• How do I know which field is being clicked? I tried using the jquery $(this) but it aint working. How can jQuery help me ?

Thanks in advance!

Answer 1

You don't need jQuery for this. Here is a working example using only javascript:

HTML:

<input class="autocomplete" id="ac1" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac2" placeholder="Enter your address" type="text"></input>
<input class="autocomplete" id="ac3" placeholder="Enter your address" type="text"></input>

JavaScript:

var acInputs = document.getElementsByClassName("autocomplete");

for (var i = 0; i < acInputs.length; i++) {

    var autocomplete = new google.maps.places.Autocomplete(acInputs[i]);
    autocomplete.inputId = acInputs[i].id;

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        console.log('You used input with id ' + this.inputId);
    });
}

JSFiddle demo

If you want to do it with jQuery then you can try this way:

$('.autocomplete').each(function() {
    
    var autocomplete = new google.maps.places.Autocomplete($(this)[0]);
    autocomplete.inputId = $(this).attr('id');

    google.maps.event.addListener(autocomplete, 'place_changed', function () {
        console.log('You used input with id ' + this.inputId);
    });
});

JSFiddle demo

Hope this helps.