Google Maps additional parameter to mouseover – Blancer.com Tutorials and projects

I’m trying to pass an additional parameter to show in the mouseover event, but it’s only showing the last one.

tried passing the variable via addListener with stepDisplay.setContent but, don’t show nothing.

    var stepDisplay

    function initMap() {

      const directionsService = new google.maps.DirectionsService();

      map = new google.maps.Map(document.getElementById("map"), {
        center: {
          lat: -23.6085666,
          lng: -46.6663397
        },
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      const directionsRenderer = new google.maps.DirectionsRenderer({
        map: map
      });

        for (var i = 0; i < polylines.length; i++) {
            polylines[i].setMap(null);
        }
      var listPos = [{"maps_latA":"-23.577084","maps_lonA":"-46.629042","maps_latB":"-23.611103","maps_lonB":"-46.655907", "display": "test1"},
      {"maps_latA":"-23.6039706","maps_lonA":"-46.6637391","maps_latB":"-23.606099","maps_lonB":"-46.668277", "display": "test2"}];

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

        var startPoint = new google.maps.LatLng(listPos[i]['maps_latA'], listPos[i]['maps_lonA']);
        var endPoint = new google.maps.LatLng(listPos[i]['maps_latB'], listPos[i]['maps_lonB']);

            stepDisplay = new google.maps.InfoWindow({
                content: listPos[i]['display']
            });

        var directionsDisplay = new google.maps.DirectionsRenderer({
          map: map,
          preserveViewport: false
        });

        calculateAndDisplayRoute(directionsDisplay, directionsService, stepDisplay, startPoint, endPoint);

      }

      map.fitBounds(flightPath.getBounds());
    }

    function calculateAndDisplayRoute(directionsDisplay, directionsService,
      stepDisplay, startPoint, endPoint) {
      directionsService.route({
        origin: startPoint,
        destination: endPoint,
        travelMode: 'DRIVING'
      }, function(response, status) {
        if (status === 'OK') {
          renderPolylines(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    }
    var polylineOptions = {
      strokeColor: 'green',
      strokeOpacity: 1,
      strokeWeight: 4
    };
    var polylines = [];

    function renderPolylines(response) {
        var bounds = new google.maps.LatLngBounds();
        var legs = response.routes[0].legs;
        for (i = 0; i < legs.length; i++) {
            var steps = legs[i].steps;
            for (j = 0; j < steps.length; j++) {
                var nextSegment = steps[j].path;
                var stepPolyline = new google.maps.Polyline(polylineOptions);
                for (k = 0; k < nextSegment.length; k++) {
                    stepPolyline.getPath().push(nextSegment[k]);
                    bounds.extend(nextSegment[k]);
                }
                google.maps.event.addListener(stepPolyline, 'mouseover', function(evt) {
                    this.setOptions({
                        strokeWeight: 8
                    })
                    stepDisplay.setPosition(evt.latLng);
                    stepDisplay.open(map);
                });
                google.maps.event.addListener(stepPolyline, 'mouseout', function(evt) {
                    this.setOptions({
                        strokeWeight: 4
                    });
                    stepDisplay.close(map);
                });
                polylines.push(stepPolyline);
                stepPolyline.setMap(map);
            }
        }
    }

    #map {
      height: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Travel modes in directions</title>
  <link href="http://code.google.com//apis/maps/documentation/javascript/examples/default.css" rel="stylesheet">
</head>

<body>
  <div id="map"></div>
</body>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&language=pt&callback=initMap">
  </script>
</html>