OpenLayers 3 - OSRM Polyline Route

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ol3/3.10.1/ol.min.css">
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map"></div>
<div id="msg">
Da <input id="da" type="text" size="10" value="Roma" /> 
a <input type="text" id="a" size="10" value="Milano" /> 
<input type="button" id="mostraPercorso" value="Mostra percorso" />
</div>

CSS

html,body,#map { width:100%; height:100%; margin:0; }
#map {
    position: absolute;
    z-index: 5;
}
#msg{
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translate(-50%, 5px);
    background-color: rgba(40,40,40,.8);
    padding: 10px;
    color: #eee;
    width: 350px;
    text-align: center;
}

JavaScript

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({layer: 'osm'})
    })
  ],
  view: new ol.View({
    center: ol.proj.transform([12.787573, 42.789172], 'EPSG:4326', 'EPSG:3857'),
    zoom: 6
  })
});

var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({
  source: vectorSource
});
map.addLayer(vectorLayer);

var icon_url = 
	'//cdn.rawgit.com/openlayers/ol3/master/examples/data/icon.png';
var styles = {
  route: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 6, color: [40, 40, 40, 0.8]
    })
  }),
  icon: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 1],
      src: icon_url
    })
  })
};
var url_osrm_route = "//router.project-osrm.org/viaroute?";
var url_nominatim = "//nominatim.openstreetmap.org/search?format=json&limit=1&q=";
console.clear();

var mostraPercorso = document.getElementById("mostraPercorso");
mostraPercorso.addEventListener("click", function(){
  var da = document.getElementById("da").value;
  var a = document.getElementById("a").value;
	var richiesta1 = $.getJSON(url_nominatim + da);
  var richiesta2 = $.getJSON(url_nominatim + a);
  $.when(richiesta1, richiesta2)
  .fail(function() { alert("Errore nella richiesta"); })
  .done(function(risposta1, risposta2) {
  console.log("Primo risultato geocoding", risposta1);
  console.log("Secondo risultato geocoding", risposta2);
  var punto1 = risposta1[0][0];
  var punto2 = risposta2[0][0];
  console.log(map);
  
  //map.zoomToExtent([Math.min(punto1.lon, punto2.lon), Math.min(punto1.lat, punto2.lat), Math.max(punto1.lon, punto2.lon), Math.max(punto1.lat, punto2.lat)], true);
  
  $.getJSON(url_osrm_route + "loc=" + [punto1.lat, punto1.lon].join() + "&loc=" + [punto2.lat, punto2.lon].join())
  .fail(function() { alert("Errore nella richiesta"); })
  .done(function(risposta){
  console.log("Percorso calcolato", risposta);
  var route = new ol.format.Polyline({
    ...