<script>
  $(function(){

      var accessToken = '7fNWCXhqQ_OSyB4fd8C6539PYQ1G8YjdsOCoTtio';
      var gssPolyline;

      $('#submit').on('click', function(){
          getRoute();
      });

      function getRoute(){

          var origin = new gssdirections.GSSLatLng($('#originLat').val(), $('#originLng').val());
          var destination = new gssdirections.GSSLatLng($('#destLat').val(), $('#destLng').val());
          var directionsRequest = new gssdirections.GSSDirectionsRequest(origin, destination);
          directionsRequest.setOptimize($('#optimize').val());
          directionsRequest.setVehicle($('#vehicle').val());
          directionsRequest.setAvoids($('#avoid').val());
          directionsRequest.setTrafficOption($('#traffic_level').val());

          var directionsService = new gssdirections.GSSDirectionsService(accessToken);

          directionsService.getRoute(directionsRequest, function(gssDirectionsResponse){
              var str = convertResponseToString(gssDirectionsResponse);
             // console.log("Response: " + JSON.stringify(data));
              $('#json_data').html(str);
          }, function(error){
              console.log("Error: " + error.status + " --> " + error.statusText);
          });
        }

        function convertResponseToString(gssDirectionsResponse){
            var str = "{\n";
            var indent = "    ";

            if(gssDirectionsResponse.getRoutes()){
              str += indent + "routes=[\n"
              let routes = gssDirectionsResponse.getRoutes();
              for(var i = 0; i < routes.length; i++){
                  str += parseRoute(routes[i], indent+indent);
              }
              str += "    ]\n"
            }

            return str + "}";
        }

        function parseRoute(route, indent){
          var routeStr = indent + "route={\n";
          var routeSegments = route.getRouteSegments();
          routeDetailIndent = indent + "    ";
          routeStr = routeStr + routeDetailIndent + "distance=" + route.getDistance() + "\n";
          routeStr = routeStr + routeDetailIndent + "traveTime=" + route.getTravelTime() + "\n";
          for(var i = 0; i < routeSegments.length; i++){
              routeStr += parseRouteSegment(routeSegments[i], routeDetailIndent);
          }
          return routeStr + indent + "}\n";
        }

        function parseRouteSegment(routeSegment, indent){
          var routeSegmentStr =  indent + "routeSegment = [\n";
          var routeManeuverIndent = indent + "    ";
          var routeManeuvers = routeSegment.getRouteManeuvers()

          if(routeManeuvers && routeManeuvers.length > 0){
              for(var j = 0; j < routeManeuvers.length; j++){
                  routeSegmentStr += parseRouteManeuver(routeManeuvers[j], routeManeuverIndent);
              }
          }

          return routeSegmentStr + indent +  "]\n";
        }

        function parseRouteManeuver(routeManeuver, indent){
          var routeManeuverStr =  indent + "routeManeuver = {\n";
          var routeManeuverIndent = indent + "    ";

          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "distance=" + routeManeuver.getDistance() + "\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "heading=" + routeManeuver.getHeading() + "\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "speed=" + routeManeuver.getSpeed() + "\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "currentRoadName=\"" + routeManeuver.getCurrentRoadName() + "\"\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "turnRoadName=\"" + routeManeuver.getTurnRoadName() + "\"\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "drivingSide=\"" + routeManeuver.getDrivingSide() + "\"\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "countryCode=\"" + routeManeuver.getCountryCode() + "\"\n";
          routeManeuverStr = routeManeuverStr + routeManeuverIndent + "turnCommand=\"" + routeManeuver.getTurnCommand() + "\"\n";

          if(routeManeuver.getPolyline()){
              routeManeuverStr = routeManeuverStr + routeManeuverIndent + "polyline=[\n";
              var polyline = routeManeuver.getPolyline();

              for(var k = 0; k < polyline.length; k++){
                  routeManeuverStr = routeManeuverStr + parsePolyline(polyline[k], routeManeuverIndent + "    ");
              }

              routeManeuverStr = routeManeuverStr + routeManeuverIndent + "]\n";
          }

          return routeManeuverStr + indent + "}\n";
        }

        function parsePolyline(latLng, indent){
          return indent + "{lat=" + latLng.lat + " , lng="+ latLng.lat + "}\n";
        }

      });
</script>