javascript - google maps autocomplete with dynamic arrays

Question

So I have dynamic text inputs which i require to give it access to google maps (places) autocomplete api.

The "start", "end" and 1st "waypoint"(not dynamic) works well, but after 4 hours, i am still struggling to get my dynamic text inputs to autocomplete. And can not find anything resembling the answer on google.

This is what i have so far: Javascript:

 function initialize() {
 var options = {
    componentRestrictions: {
        country: "au"
    }
};

var inputs = document.getElementById('start');
var autocompletes = new google.maps.places.Autocomplete(inputs, options);
var inpute = document.getElementById('end');
var autocompletee = new google.maps.places.Autocomplete(inpute, options);

var waypoints = document.getElementsByName("waypoints[]");
for (var i = 0; i < waypoints.length; i++) {
var inputw = waypoints[i];
var autocompletew = new google.maps.places.Autocomplete(inputw, options);
}


directionsDisplay = new google.maps.DirectionsRenderer();
var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);

}

HTML:

var counter = 1;
var limit = 10;
var i = 1;
function addInput(divName){
 if (counter == limit)  {
      alert("You have reached the limit of adding " + counter + " inputs");
 }
 else {
      var newdiv = document.createElement('div');
      newdiv.innerHTML = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>";
      document.getElementById(divName).appendChild(newdiv);
      counter++;
i++;
var inputw = waypoints[i];
var autocompletew = new google.maps.places.Autocomplete(inputw, options);

     }
}

Answer 1

Dynamically creating the content, then using the reference to that works for me:

function addInput(divName) {
  if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " inputs");
  } else {
    var newbr = document.createElement('br');
    var newtxt = document.createTextNode(""+(counter+1));
    var newinput = document.createElement("input");
    newinput.setAttribute("name","waypoints[]");
    newinput.setAttribute("autocompute","on");
    newinput.setAttribute("type", "text");
    document.getElementById(divName).appendChild(newbr);
    document.getElementById(divName).appendChild(newtxt);
    document.getElementById(divName).appendChild(newinput);
    counter++;
    i++;
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions);
}

proof of concept fiddle

code snippet:

var counter = 1;
var limit = 10;
var i = 0;
var ACoptions = {
  componentRestrictions: {
    country: "au"
  }
};

function initialize() {


  var inputs = document.getElementById('start');
  var autocompletes = new google.maps.places.Autocomplete(inputs, ACoptions);
  var inpute = document.getElementById('end');
  var autocompletee = new google.maps.places.Autocomplete(inpute, ACoptions);

  var waypoints = document.getElementsByName("waypoints[]");
  for (var i = 0; i < waypoints.length; i++) {
    var inputw = waypoints[i];
    var autocompletew = new google.maps.places.Autocomplete(inputw, ACoptions);
  }

  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsService = new google.maps.DirectionsService();
  var melbourne = new google.maps.LatLng(-31.953512, 115.857048);
  var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne
  }

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  directionsDisplay.setMap(map);
  google.maps.event.addDomListener(document.getElementById('getdir'), 'click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

function addInput(divName) {
  if (counter == limit) {
    alert("You have reached the limit of adding " + counter + " inputs");
  } else {
    var newbr = document.createElement('br');
    var newtxt = document.createTextNode("" + (counter + 1));
    var newinput = document.createElement("input");
    newinput.setAttribute("name", "waypoints[]");
    newinput.setAttribute("autocompute", "on");
    newinput.setAttribute("type", "text");

    // newin = (counter + 1) + "<input type=text name=waypoints[] autocomplete=on>";
    document.getElementById(divName).appendChild(newbr);
    document.getElementById(divName).appendChild(newtxt);
    document.getElementById(divName).appendChild(newinput);
    counter++;
    i++;
    console.log("cntr=" + counter + " i=" + i + " waypoints[].length=" + document.getElementsByName("waypoints[]"));
    // var inputw = waypoints[i];
    var autocompletew = new google.maps.places.Autocomplete(newinput, ACoptions);

  }
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('dynamicInput');
  var waypointElmts = document.getElementsByName('waypoints[]');
  for (var i = 0; i < waypointElmts.length; i++) {
    if (waypointElmts[i].value.length > 0) {
      waypts.push({
        location: waypointElmts[i].value,
        stopover: true
      });
    }
  }
  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<input id="start" value="Margaret River, AU" />
<input id="end" value="Perth, AU" />
<div id="dynamicInput">
  <br>1
  <input type="text" name="waypoints[]" autocomplete="on">
</div>
<input type="button" value="Another Delivery" onClick="addInput('dynamicInput');">
<input id="getdir" type="button" value="get route" />
<div id="map_canvas"></div>