javascript - Waypoints code in Google maps -

i using html form inputs of 3 zip-codes (portzip, importerzip, exporterzip).

<form> calculation of out of route distance.<br> enter 5 digit valid zipcodes<br><br> port zipcode:<br> <input type="text" id="portzip" value="31402"> <br><br> importer zipcode:<br> <input type="text" id="importerzip" value="30308"> <br><br> exporter zipcode:<br> <input type="text" id="exporterzip" value="30901"> <br><br>  <input type="button" value="calculate" onclick="calcroute()" /> </form>  

i want plot path bfrom portzip portzip via exporterzip. code below-

function calcroute() {   var start = document.getelementbyid('portzip').value;   var end = document.getelementbyid('importerzip').value;   var waypts = document.getelementbyid('exporterzip').value;    var request = {       origin:start,       destination:end,       waypoints:waypts,       optimizewaypoints: true,       travelmode: google.maps.travelmode.driving   };   directionsservice.route(request, function(response, status) {     if (status == google.maps.directionsstatus.ok) {       directionsdisplay.setdirections(response);     }   });  } 

is waypoints formulation right? code not leading result. if run code without waypoints:waypts, works. what's wrong code?

a waypoint javascript anonymous object, waypoints property of directions request should array of waypoint objects (like had in last question on this). if run code javascript error: uncaught invalidvalueerror: in property waypoints: not array

function calcroute() {   var start = document.getelementbyid('portzip').value;   var end = document.getelementbyid('importerzip').value;   var waypts = [{location:document.getelementbyid('exporterzip').value}];;    var request = {       origin:start,       destination:end,       waypoints:waypts,       optimizewaypoints: true,       travelmode: google.maps.travelmode.driving   };   directionsservice.route(request, function(response, status) {     if (status == google.maps.directionsstatus.ok) {       directionsdisplay.setdirections(response);     }   });  } 

code snippet:

var map;  var directionsservice = new google.maps.directionsservice();  var directionsdisplay = new google.maps.directionsrenderer();    function initialize() {    //convert map div fully-functional google map    var mapoptions = {      zoom: 8,      center: new google.maps.latlng(-34.397, 150.644),      maptypeid: google.maps.maptypeid.roadmap    };    map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions);    directionsdisplay.setmap(map);  }    function calcroute() {    var start = document.getelementbyid('portzip').value;    var end = document.getelementbyid('importerzip').value;    var waypts = [{      location: document.getelementbyid('exporterzip').value    }];;      var request = {      origin: start,      destination: end,      waypoints: waypts,      optimizewaypoints: true,      travelmode: google.maps.travelmode.driving    };    directionsservice.route(request, function(response, status) {      if (status == google.maps.directionsstatus.ok) {        directionsdisplay.setdirections(response);      }    });    }  google.maps.event.adddomlistener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>  <form>calculation of out of route distance.    <br />enter 5 digit valid zipcodes    <br />    <br />port zipcode:    <br />    <input type="text" id="portzip" value="31402" />    <br />    <br />importer zipcode:    <br>    <input type="text" id="importerzip" value="30308" />    <br />    <br />exporter zipcode:    <br />    <input type="text" id="exporterzip" value="30901" />    <br />    <br />    <input type="button" value="calculate" onclick="calcroute()" />  </form>  <div id="map_canvas"></div>