Question

How can we intialize new google.maps.places.Autocomplete(Input, Options); for two text boxes in same page?
When i am trying to do that the first initialized is working and the second one is not working….

Alaready i have tried google.maps.event.removeListener(autocomplete); and google.maps.event.clearListeners(autocomplete, ‘place_changed’); methods to unbind the first one..but nothing worked out…

Answer 1

Don’t know if this is the most elegant, but this worked for me…

// add autocomplete functionality to our search fields
var input_one = document.getElementById('input_one');
var input_two = document.getElementById('input_two');
var autocomplete_one = new google.maps.places.Autocomplete(input_one);
var autocomplete_two = new google.maps.places.Autocomplete(input_two);

// listeners to capture updated location
google.maps.event.addListener(autocomplete_one, 'place_changed', function() {
  var objLocation = autocomplete_one.getPlace();
  autoComplete_Update(objLocation);
});
google.maps.event.addListener(autocomplete_two , 'place_changed', function() {
  var objLocation = autocomplete_two.getPlace();
  autoComplete_Update(objLocation);
});

function autoComplete_Update( objLocation ) {
  // handle results from either autocomplete here.
  // you could obviously have two handler functions, 
  // or pass in extra parameters if you wanted to differentiate between the two
}