Edit in JSFiddle

function go() {
  var lon = document.getElementById("lon").value;
  var lat = document.getElementById("lat").value;
  var time = document.getElementById("time").value;
  var resultDiv = document.getElementById("result");
  try {
    Gp.Services.isoCurve({
      position: {
        x: lon,
        y: lat
      },
      time: time,
      graph: "Pieton",
      apiKey: "jhyvi0fgmnuxvfv0zjzorvdn",
      onSuccess: function(result) {
        resultDiv.innerHTML = "<p>" + JSON.stringify(result) + "</p>"
      },
      onFailure: function(error) {
        resultDiv.innerHTML = "<p>" + error + "</p>"
      }
    });
  } catch (e) {
    resultDiv.innerHTML = "<p>" + e + "</p>"
  }
}

var infoDiv = document.getElementById("info");
infoDiv.innerHTML = "<p> Bibliothèque d'accès version " + Gp.servicesVersion + " (" + Gp.servicesDate + ")</p>";
<div id="params">
  <p>
    longitude :
    <input type="text" id="lon" size="10"/>
    latitude :
    <input type="text" id="lat" size="10"/>
  </p>
  <p>
    Limite de temps (secondes):
    <input type="text" id="time" size="10"/>
  </p>
</div>
<div id="go">
  <input type="button" value="IsoChrone" onclick="go()" />
</div>
<div id="result"></div>
<div id="info"></div>
#params {
  width: 100%;
  height: 100px;
  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;
}
#info {
  padding: 5px;
  width: 100%;
  height: 20px;
  font-family: monospace;
}