Show Value next to line in google maps

Question

I've created a KML file with lines corresponding with roads (see the picture for 1 road/link). I changed the linewidth and color to distinguish types of the roads. I've got 2 questions about the layout:

1) I would like to add and rotate a value along the line. Is that possible using KML file or have i use another method (like 4.32 in the picture)?

2) Is it possible to show the end cap of a line as a 'square' ? (default in my KML is rounded)

Thanks you so much!

Example (question 1):

Answer 1

For #1 you can add an InfoBox with rotated text along the polyline.
For #2, there is no option to modify how the ends of polylines are rendered, you could try putting a square symbol over the end, but it would be a hack.

var labelText = "4.32";
var labelDiv = document.createElement("div");
labelDiv.innerHTML = labelText;
labelDiv.setAttribute("id","label");
labelDiv.setAttribute("style","-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);     transform: rotate(45deg);");

var myOptions = {
    content: labelDiv,
    boxStyle: {
        border: "none",
        textAlign: "center",
        fontSize: "12pt",
        width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(52.193176,8.642923),
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
};

var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeWeight: 10,
      strokeColor: "#FF0000"
    },
    suppressMarkers: true
  });
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom: 7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute(new google.maps.LatLng(52.19386, 8.640927), new google.maps.LatLng(52.19171, 8.64429));
  var labelText = "4.32";
  var labelDiv = document.createElement("div");
  labelDiv.innerHTML = labelText;
  labelDiv.setAttribute("id", "label");
  labelDiv.setAttribute("style", "-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);     transform: rotate(45deg);");

  var myOptions = {
    content: labelDiv,
    boxStyle: {
      border: "none",
      textAlign: "center",
      fontSize: "12pt",
      width: "50px"
    },
    disableAutoPan: true,
    pixelOffset: new google.maps.Size(-25, 0),
    position: new google.maps.LatLng(52.193176, 8.642923),
    closeBoxURL: "",
    isHidden: false,
    pane: "mapPane",
    enableEventPropagation: true
  };

  var ibLabel = new InfoBox(myOptions);
  ibLabel.open(map);
}

function calcRoute(start, end) {
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/archive/infobox/src/infobox.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>