JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<div id="form" >
    <p>
<label for="von" >von </label>
<input type="text" value="wolfsburg" id="von" />
    </p><p>
<label for="nach" >nach </label>
<input type="text" value="leipzig" id="nach" />
    </p>
<input type="submit" value="berechnen" id="doit" />
</div>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>

CSS

#form{
    margin:10px;
    padding:6px;
}
#form p{
    margin-top:5px;
}

JavaScript

var directionsService = new google.maps.DirectionsService();
 function calcRoute() {
   var start = $("#von").val();
    var end = $("#nach").val();
    var waypts = [];
    var request = {
        origin: start, 
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
  var route = response.routes[0];
  var summaryPanel=document.getElementById("directions_panel");
        var lang = 0.0;

        for (var i = 0; i < route.legs.length; i++) {

          lang += route.legs[i].distance.value;
        }
         $("#directions_panel").html("Entfernung : " + (lang /1000) + " km ");
      }
    });
  }

$("#doit").click(function(){
    $("#directions_panel").html("suche");
    calcRoute();
});