google maps - Merging two outputs into a single output in javascript -

i have demo1 here , have demo2 here. want include demo 2 output between html form , google map. new js. when tried pasting specific function of demo 2 demo 1, didn't work. how do that?

var map;  var directionsservice = new google.maps.directionsservice();  var directionsdisplay = new google.maps.directionsrenderer();    function initialize() {      //initialize global variables      var zipcodestolookup1 = new array(document.getelementbyid("portzip").value, document.getelementbyid("importerzip").value, document.getelementbyid("exporterzip").value, document.getelementbyid("portzip").value);      var output = '<tr><th scope="col">from</th><th scope="col">to</th><th scope="col">miles</th></tr>';      var output = '<tr><th scope="col">from</th><th scope="col">to</th><th scope="col">miles</th></tr>';      var difference = "0";      var totaldist = 0;      // document.write(difference);      //execute distance matrix query      var service = new google.maps.distancematrixservice();      service.getdistancematrix({          origins: zipcodestolookup1,          destinations: zipcodestolookup1,          travelmode: google.maps.travelmode.driving,          unitsystem: google.maps.unitsystem.imperial      }, function (response, status) {          if (status == google.maps.distancematrixstatus.ok) {              var origins = response.originaddresses;              var destinations = response.destinationaddresses;              (var = 0; < origins.length - 1; i++) {                  var results = response.rows[i].elements;                  output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i + 1] + '</td><td>' + results[i + 1].distance.text + '</td></tr>';                  if (i != 0) {                      totaldist += results[i + 1].distance.value;                  } else {                      totaldist -= results[i + 1].distance.value;                  }                }              output += '<tr><td></td><td>out of route distance -</td><td>' + (totaldist / 1000 * 0.621371).tofixed(0) + ' mi</td></tr>';              document.getelementbyid('zip_code_output').innerhtml = '<table cellpadding="5">' + output + '</table>';          }      });  }    //function load google maps api  function loadscript() {      var script = document.createelement("script");      script.type = "text/javascript";      script.src = "http://maps.googleapis.com/maps/api/js?key=aizasycdzpaor25kskptrivi3mzoag1nl6f0jv0&sensor=false&callback=initialize";      document.body.appendchild(script);  }

<form>      calculation of out of route distance.<br>      enter 5 digit valid zipcodes<br>      port zipcode:<br>      <input type="text" id="portzip" value="31402"><br>      importer zipcode:<br>      <input type="text" id="importerzip" value="30308"><br>      exporter zipcode:<br>      <input type="text" id="exporterzip" value="30901"><br>      <input type="button" value="calculate" onclick="loadscript()" />  </form>    <div id="zip_code_output"></div>  <div id="map_canvas" style="width:650px; height:600px;"></div>

you have 2 different results, 2 differents asynchronous methods (functions).

you need obtain twice results , show @ same time, recomend use async library. has method called parallel exec callback when 2 proccess must end:

for ex:

function calculerouteandshow () {     var service = new google.maps.distancematrixservice();     var directionsservice = new google.maps.directionsservice();     var directionsdisplay = new google.maps.directionsrenderer();      var zipcodeoutput = document.getelementbyid('zip_code_output');     var importzip = document.getelementbyid('importerzip').value;     var exportzip = document.getelementbyid('exporterzip').value;     var portzip = document.getelementbyid("portzip").value;      async.parallel({         getdistance: funcion (done) {             service.getdistancematrix({                 origins:      [portzip, importzip, exportzip],                 destinations: [portzip, importzip, exportzip],                 travelmode:   google.maps.travelmode.driving,                 unitsystem:   google.maps.unitsystem.imperial             }, function(response, status) {                  if (status !== google.maps.distancematrixstatus.ok) {                     return done(null, response);                 }                  var origins = response.originaddresses;                 var destinations = response.destinationaddresses;                 var output = "";                  for(var i=0; < origins.length-1; i++) {                     var results = response.rows[i].elements;                     output += '<tr><td>' + origins[i] + '</td><td>' + destinations[i+1] + '</td><td>' + results[i+1].distance.text + '</td></tr>';                     if (i != 0){                         totaldist += results[i+1].distance.value;                     }                     else {                         totaldist -= results[i+1].distance.value;                     }                  }                  output += '<tr><td></td><td>out of route distance -</td><td>'+(totaldist/1000*0.621371).tofixed(0)+ ' mi</td></tr>';                  return done(null, output);              });          },          calculateroute: function (done) {              var waypts = [{                 location: importzip             },{                 location: exportzip              }];;              var request = {                 origin: portzip,                 destination: portzip,                 waypoints: waypts,                 optimizewaypoints: true,                 travelmode: google.maps.travelmode.driving             };              directionsservice.route(request, function(response, status) {                 if (status !== google.maps.directionsstatus.ok) {                     return done(status);                 }                  return done(null, response);              });         }      }, function (err, responses) {          if (err) {             alert("we have error here :(");             return;         }          zipcodeoutput.innerhtml = '<table cellpadding="5">' + responses.getdistance + '</table>';         directionsdisplay.setdirections(responses.calculateroute);      });  }  

i hope you, sorry poor english.