Edit in JSFiddle

var map = null; // carte leaflet pour affichage

function go() {
  var lon1 = document.getElementById("lon1").value;
  var lat1 = document.getElementById("lat1").value;
  var lon2 = document.getElementById("lon2").value;
  var lat2 = document.getElementById("lat2").value;
  var lon3 = document.getElementById("lon3").value;
  var lat3 = document.getElementById("lat3").value;
  var avoidFeatures = [];
  var noToll = document.getElementById("toll").checked;
  if (noToll) avoidFeatures.push("toll");
  var noBridge = document.getElementById("bridge").checked;
  if (noBridge) avoidFeatures.push("bridge");
  var noTunnel = document.getElementById("tunnel").checked;
  if (noTunnel) avoidFeatures.push("tunnel");
  var graphIdx = document.getElementById("graph").selectedIndex;
  var graph = document.getElementById("graph").options[graphIdx].value;
  var methodIdx = document.getElementById("method").selectedIndex;
  var method = document.getElementById("method").options[methodIdx].value;
  var resultDiv = document.getElementById("result");
  try {
    Gp.Services.route({
      startPoint: {
        x: lon1,
        y: lat1
      },
      endPoint: {
        x: lon3,
        y: lat3
      },
      viaPoints: [{
        x: lon2,
        y: lat2
      }],
      graph: graph,
      avoidFeature: avoidFeatures,
      routePreference: method,
      apiKey: "calcul",
      onSuccess: function(result) {
        resultDiv.innerHTML = "<p>" + JSON.stringify(result) + "</p>";
        // affichage sur la carte
        L.geoJson(result.routeGeometry).addTo(map);
      },
      onFailure: function(error) {
        resultDiv.innerHTML = "<p>" + error + "</p>";
      }
    });
  } catch (e) {
    resultDiv.innerHTML = "<p>" + e + "</p>"
  }
};
map = L.map("map").setView([48.845, 2.424], 5);
L.tileLayer(
  'https://wxs.ign.fr/essentiels/geoportail/wmts?service=WMTS&request=GetTile&version=1.0.0&tilematrixset=PM&tilematrix={z}&tilecol={x}&tilerow={y}&layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&format=image/png&style=normal', {
    minZoom: 0,
    maxZoom: 18,
    tileSize: 256
  }).addTo(map);

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Bibliothèque d'accès version " + Gp.servicesVersion + " (" + Gp.servicesDate + ")</p>";
<div id="params">
  <p>
    lon départ:
    <input type="text" id="lon1" size="10" /> lat départ :
    <input type="text" id="lat1" size="10" />
  </p>
  <p>
    lon inter :
    <input type="text" id="lon2" size="10" /> lat inter :
    <input type="text" id="lat2" size="10" />
  </p>
  <p>
    lon arrivée:
    <input type="text" id="lon3" size="10" /> lat arrivée :
    <input type="text" id="lat3" size="10" />
  </p>
  <p> Eviter :
    <input type="checkbox" value="true" id="toll"> péages
    <input type="checkbox" value="true" id="bridge"> ponts
    <input type="checkbox" value="true" id="tunnel"> tunnels
  </p>
  <p>Graphe :
    <select id="graph">
      <option value="Pieton">Piéton</option>
      <option value="Voiture">Voiture</option>
    </select>
    Methode de calcul :
    <select id="method">
      <option value="fastest">le plus rapide</option>
      <option value="shortest">le plus court</option>
    </select>
  </p>
</div>
<div id="go">
  <input type="button" value="Itinéraire" onclick="go()" />
</div>
<div id="map"></div>
<div id="result"></div>
<div id="info"></div>
#params {
  width: 100%;
  height: 200px;
  box-shadow: 0 0 10px #999;
  font-family: monospace;
  padding: 5px;
}

#go {
  padding: 5px;
  float: center;
  width: 100%;
  height: 30px;
}

#result {
  padding: 5px;
  width: 100%;
  height: 200px;
  box-shadow: 0 0 10px #999;
  font-family: monospace;
  overflow: scroll;
}

#map {
  padding: 5px;
  width: 100%;
  height: 300px;
  box-shadow: 0 0 10px #999;
}

#info {
  padding: 5px;
  width: 100%;
  height: 20px;
  font-family: monospace;
}