JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,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>

CSS

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

JavaScript

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

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);
   ...