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
        var format= new ol.format.GeoJSON() ;
        // on crée un feature asocié à la géométrie de l'itinéraire
        var feature= new ol.Feature({
            geometry : format.readGeometry(result.routeGeometry, {
                 featureProjection:"EPSG:3857"
            })
        }) ;
        feature.setStyle(new ol.style.Style({
            stroke : new ol.style.Stroke({
                color: 'red', 
                width: 3
            })
        })) ;
        var vectorSource = new ol.source.Vector({
          features: [feature]
        });

        var vectorLayer = new ol.layer.Vector({
          source: vectorSource
        });
        map.addLayer(vectorLayer);
      },
      onFailure: function(error) {
        resultDiv.innerHTML = "<p>" + error + "</p>";
      }
    });
  } catch (e) {
    resultDiv.innerHTML = "<p>" + e + "</p>"
  }
};


var projection = ol.proj.get('EPSG:3857');
// var projectionExtent = projection.getExtent();
var resolutions = [
  156543.03392804103,
  78271.5169640205,
  39135.75848201024,
  19567.879241005125,
  9783.939620502562,
  4891.969810251281,
  2445.9849051256406,
  1222.9924525628203,
  611.4962262814101,
  305.74811314070485,
  152.87405657035254,
  76.43702828517625,
  38.218514142588134,
  19.109257071294063,
  9.554628535647034,
  4.777314267823517,
  2.3886571339117584,
  1.1943285669558792,
  0.5971642834779396,
  0.29858214173896974,
  0.14929107086948493,
  0.07464553543474241
];
var attribution = new ol.Attribution({
  html: '<a href="https://geoportail.gouv.fr/>Géoportail</a>'
});

map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      opacity: 1,
      //extent: projectionExtent,
      source: new ol.source.WMTS({
        attributions: [attribution],
        url: 'https://wxs.ign.fr/cartes/geoportail/wmts',
        layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2',
        matrixSet: 'PM',
        format: 'image/png',
        //projection: projection,
        tileGrid: new ol.tilegrid.WMTS({
          origin: [-20037508, 20037508],
          resolutions: resolutions,
          matrixIds: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
        }),
        style: 'normal'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [260516, 6246918],
    zoom: 6
  })
});

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;
}