I have Google Maps Autoplete 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-plete, I have the following code:

//
$(document).ready(function () {

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

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

});

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

function MyFunc() {
    var fullAddress = autoplete.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!

I have Google Maps Autoplete 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-plete, I have the following code:

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

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

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

});

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

function MyFunc() {
    var fullAddress = autoplete.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!

• javascript
• jquery
• google-maps-api-3

Share Improve this question Follow edited Jan 26, 2015 at 13:25 MrUpsidown 22.5k1515 gold badges8383 silver badges141141 bronze badges asked Jan 23, 2015 at 17:00 Flame_PhoenixFlame_Phoenix 17.6k4040 gold badges145145 silver badges284284 bronze badges 4

• Post your MyFunc() function and the inputs please. – RhapX Commented Jan 23, 2015 at 17:03
• @RhapX: done ! I updated the post as requested! – Flame_Phoenix Commented Jan 23, 2015 at 17:06
• Why do you have multiple inputs? What's the point? – MrUpsidown Commented Jan 26, 2015 at 12:50
• @MrUpsidown: I have a table with multiple addresses and I wand the user to be able to specify them. Thus, each entry has an input field for the user to type an address. – Flame_Phoenix Commented Jan 26, 2015 at 12:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10 +50

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

HTML:

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

JavaScript:

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

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

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

    google.maps.event.addListener(autoplete, '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:

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

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

JSFiddle demo

Hope this helps.

In order to find out which input element is being called, you could pass the event to MyFunc(). Using $(this) isn't going to check outside of that function to see what called it.

Update the addListener to the following.

google.maps.event.addListener(autoplete, 'place_changed', function (e) {
    MyFunc(e);
});`

And update MyFunc() to

function MyFunc(e) {
    var fullAddress = autoplete.getPlace().formatted_address;
    var input = e;
    //stuff that uses input
}

You can then use input as the variable that holds the information about the element being updated. If you do console.log(input); below the var input = e; you will see a list of items you can use to get the data.

You may be most interested in setting var input = e; to var input = e.target; instead. This will allow you to get the information about the input easily.

Example: input.value would return the value of the input in question.