Google Places Autocomplete doesn't work on dynamically generated input elements
autocomplete, google-maps, google-maps-api-3, javascript, jquery
Solution
Problem is that you don't call `setupAutocomplete()` after new elements are added. You have to do something like this (could be improved using jQuery):
$(document).ready(function(){
var count = 2;
$("#addInputField").click(function(){
count++;
console.log('add new input field');
$("#inputlar").append("<input id='pac-input" + count + "' class='controlsInput' type='text' placeholder='Enter your destination' /> <br />");
// added
var newInput = [];
var newEl = document.getElementById('pac-input' + count);
newInput.push(newEl);
setupAutocomplete(autocomplete, newInput, 0);
if (count === 7) {
$("#addInputField").remove();
}
});
});
Update: example at jsbin. `setupAutocomplete()` has to be changed a little, commented code left there to see difference, `idx` used instead of parameter `i`.
function setupAutocomplete(autocomplete, inputs, i) {
// autocomplete[i] = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions);
autocomplete.push(new google.maps.places.Autocomplete(inputs[i], autocompleteOptions));
var idx = autocomplete.length - 1;
//autocomplete[i].bindTo('bounds', map);
autocomplete[idx].bindTo('bounds', map);
//google.maps.event.addListener(autocomplete[i], 'place_changed', function() {
google.maps.event.addListener(autocomplete[idx], 'place_changed', function() {
...
Note: I didn't check what will happen when you reach 7 autocomplete inputs. Maybe you will have to do some update.
Problem
autocomplete works perfectly on multiple static input fields. But when i add an input field by button autocomplete doesn't work on these input fields. Maybe the problem is in closure, but I'm not sure because of my weak Javascript. Can anyone help me? Here is the code: ``` <!DOCTYPE html> <html> <head> <title>test</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> <script> var map = null; var marker = []; var autocomplete = []; var inputs = []; var types = []; var autocompleteOptions = { componentRestrictions: {country: "az"} }; ``` This function dynamically creates up to 5 input fields(I put this function in initialize method and it diidn't work either): ``` $(document).ready(function(){ var count = 2; $("#addInputField").click(function(){ count++; $("#inputlar").append("<input id='pac-input" + count + "' class='controlsInput' type='text' placeholder='Enter your destination' /> <br />"); var newInput = []; var newEl = document.getElementById('pac-input' + count); newInput[count-1] = newEl; setupAutocomplete(autocomplete, newInput, count-1); if (count === 7) { $("#addInputField").remove(); } }); ``` }); This function is called from initialize method for maintaininng autocomplete on multiple inputs. Works perfectly: ``` function setupAutocomplete(autocomplete,inputs,i) { autocomplete[i] = new google.maps.places.Autocomplete(inputs[i], autocompleteOptions); autocomplete[i].bindTo('bounds', map); google.maps.event.addListener(autocomplete[i], 'place_changed', function() { var infowindow = new google.maps.InfoWindow(); if (marker[i] && marker[i].setMap) { marker[i].setMap(null); marker[i] = null; } marker[i] = new google.maps.Marker({ map: map }); infowindow.close(); marker[i].setVisible(false); var place = autocomplete[i].getPlace(); if (!place.geometry) { return; } // If the place has a geometry, then present it on a map. if (place.geometry.viewport) { map.fitBounds(place.geometry.viewport); } else { map.setCenter(place.geometry.location); map.setZoom(17); // Why 17? Because it looks good. } marker[i].setPosition(place.geometry.location); marker[i].setVisible(true); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); } infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); infowindow.open(map, marker[i]); }); } ``` And finaly initialize method: ``` function initialize() { var mapOptions = { center: new google.maps.LatLng(40.4700, 50.0000), zoom: 10, zoomControl:true, zoomControlOptions: { style:google.maps.ZoomControlStyle.SMALL }, mapTypeControl:true, mapTypeControlOptions: { style:google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); types = document.getElementById('type-selector'); map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); inputs = document.getElementsByClassName("controlsInput"); for(var i = 0; i < inputs.length; i++) { setupAutocomplete(autocomplete,inputs,i); } // Sets a listener on a radio button to change the filter type on Places // Autocomplete. function setupClickListener(id, types) { var radioButton = document.getElementById(id); google.maps.event.addDomListener(radioButton, 'click', function() { for (var i=0 ; i<autocomplete.length; i++) { autocomplete[i].setTypes(types); } }); } setupClickListener('changetype-all', []); setupClickListener('changetype-establishment', ['establishment']); setupClickListener('changetype-geocode', ['geocode']); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> ``` And the HTML: ``` <body> <table> <tr> <td> <div> <div id="inputlar"> <input id="pac-input" class="controlsInput" type="text" placeholder="Marşrutunuzu haradan başlayırsınız" /> <br /> <input id="pac-input2" class="controlsInput" type="text" placeholder="Haraya gedirsiniz"> <br /> </div> <br /> <input id="addInputField" type="button" value="Yolüstü dayanacaq əlavə et" class="styled-button-10"/> <div hidden="hidden" id="type-selector" class="controls"> <input type="radio" name="type" id="changetype-all" checked="checked"> <label for="changetype-all">All</label> <input type="radio" name="type" id="changetype-establishment"> <label for="changetype-establishment">Establishments</label> <input type="radio" name="type" id="changetype-geocode"> <label for="changetype-geocode">Geocodes</label> </div> </div> </td> <td> <div id="map-canvas" style="width:540px;height:380px;"></div> </td> </tr> </table> </body> </html> ```