Mapbox GL Directions - mapboxgl.Directions is not a constructor - ruby-on-rails

Question

I have an issue with mapbox direction plugin, on a rails app. When I load the page where the map is, I have this error :
Uncaught TypeError: mapboxgl.Directions is not a constructor
at HTMLDocument.<anonymous> (travel.self-10030a4….js?body=1:34)
at fire (jquery.self-bd7ddd3….js?body=1:3233)
at Object.fireWith [as resolveWith] (jquery.self-bd7ddd3….js?body=1:3363)
at Function.ready (jquery.self-bd7ddd3….js?body=1:3583)
at HTMLDocument.completed (jquery.self-bd7ddd3….js?body=1:3618)
Here is the code for my map :
var map;
var directions;
// token access for MAPBOX GL
mapboxgl.accessToken = 'pk.eyJ1IjoiYW50b3RvIiwiYSI6ImNpdm15YmNwNTAwMDUyb3FwbzlzeWluZHcifQ.r44fcNU5pnX3-mYYM495Fw';
// generate map
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v10',
center: [-96, 37.8],
zoom: 5
});
// center map on selected marker
map.on('click', 'markers', function (e) {
map.flyTo({center: e.features[0].geometry.coordinates});
});
// change mouse action on enter / leave in marker
map.on('mouseenter', 'markers', function () {
map.getCanvas().style.cursor = 'pointer';
});
map.on('mouseleave', 'markers', function () {
map.getCanvas().style.cursor = '';
});
// Directions
var directions = new mapboxgl.Directions({
unit: 'metric',
profile: 'driving',
container: 'directions'
});
$.ajax({
dataType: 'json',
url: grabTravelData(),
success: function(data) {
geojson = data;
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": data
}
});
map.addLayer({
"id": "markers",
"type": "circle",
"source": "markers",
"paint": {
"circle-radius": 7,
"circle-color": "#ff7e5f"
},
});
// center map on markers
var bounds = new mapboxgl.LngLatBounds();
data.forEach(function(feature) {
bounds.extend(feature.geometry.coordinates);
});
map.fitBounds(bounds);
// test - set direction for each marker to following marker
for(var i = 0; i < data.lenght; i++) {
var last = data.length - 1
var from = data[i];
var to = data[i + 1];
directions.setOrigin(from);
if(to != from) {
directions.setDestination(to);
} else {
directions.setDestination(from);
}
}
}, error: function(data) {
console.log(data + ' error');
}
});
In this code, with a for loop I try to create a routes between each markers with the following marker.
In the header of the app I import mapbox :
<script src='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.css' type='text/css' />
Doest someone know what is this error ?

Answer 1

The proper way to use the Mapbox GL directions is
var directions = new MapboxDirections({
accessToken: 'YOUR-MAPBOX-ACCESS-TOKEN',
unit: 'metric',
profile: 'cycling'
});
map.addControl(directions);
For more details refer the API Documentation