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

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>