How to do autocomplete textbox with waypoint direction?

I need to make 3 textbox with autocomplete and also it will display a way point from textbox1 to textbox2 to textbox3 on the map. The autocomplete in textbox is working well but the way-point doesn't show.

In html first textbox's id will be "start"

second textbox's id will be "destination-input"

third textbox's id will be "destination-input2"

    function AutocompleteDirectionsHandler(map) {
  this.map = map;
  this.originPlaceId = null;
  this.destinationPlaceId = null;
  this.destinationPlaceId2 = null;
  this.travelMode = 'WALKING';
  this.directionsService = new google.maps.DirectionsService;
  this.directionsRenderer = new google.maps.DirectionsRenderer;
  this.directionsRenderer.setMap(map);



var originInput = document.getElementById('start');
  var destinationInput = document.getElementById('destination-input');
  var destinationInput2 = document.getElementById('destination-input2');


  var originAutocomplete = new google.maps.places.Autocomplete(originInput);
  // Specify just the place data fields that you need.
  originAutocomplete.setFields(['place_id']);

  var destinationAutocomplete =
      new google.maps.places.Autocomplete(destinationInput);
  // Specify just the place data fields that you need.
  destinationAutocomplete.setFields(['place_id']);

  var destinationAutocomplete2 =
      new google.maps.places.Autocomplete(destinationInput2);
  // Specify just the place data fields that you need.
  destinationAutocomplete2.setFields(['place_id']);




  this.setupPlaceChangedListener(originAutocomplete, 'ORIG');
  this.setupPlaceChangedListener(destinationAutocomplete, 'DEST');
  this.setupPlaceChangedListener(destinationAutocomplete2, 'DEST2');



this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(originInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput);
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationInput2);


}


AutocompleteDirectionsHandler.prototype.setupPlaceChangedListener = function(
autocomplete, mode) {

var me = this;

autocomplete.bindTo('bounds', this.map);


autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();



if (!place.place_id) {
  window.alert('Please select an option from the dropdown list.');
  return;
}
if (mode === 'ORIG') {
  me.originPlaceId = place.place_id;
}
  else if (mode === 'DEST'){
    me.destinationPlaceId = place.place_id;
  }

else {
   me.destinationPlaceId2 = place.place_id;
}
me.route();


 });

};

i expect that the waypoint will show including auto complete in textbox

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2qg4F7K
via IFTTT