Leaflet polyline not working

Question

I'm trying to draw polyline to connect an array of waypoints. But I'm getting an empty div like this

instead of a map with route.

My code is this:

<script>
        // set center coordinates
        var centerlat = 48.05;
        var centerlon = 44.25;

        // set default zoom level
        var zoomLevel = 3;

        // initialize map
        var map = L.map('map-track').setView([centerlat,centerlon], zoomLevel);
        var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 1, maxZoom: 18, attribution: osmAttrib});
        var lats = [];
        var lons = [];

        lats = ${lats};
        lons = ${lons};
        map.addLayer(osm);
//Here I fill an array with coordinates
            var wps = [];
            for (var j = 0; j < lats.length; j++){
                wps.push({latLng: L.latLng(lats[j], lons[j])});

            }
        L.Routing.control({
            polyline: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);
    </script>

where I've made a mistake?

---

Here I get an array of latitudes. The trouble is in these lines:

L.Routing.control({
            polyline: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);

If I write waypoints instead of polyline it works, but I need to make it with polyline.

Answer 1

L.Routing.control({
            waypoints: wps,
            lineOptions: {styles: [{color: 'black', opacity: 0.15, weight: 9},
                {color: 'white', opacity: 0.8, weight: 6},
                {color: 'blue', opacity: 0.3, weight: 15}],
                addWaypoints: false},
            createMarker: function() { return null; },
            show: false
        }).addTo(map);