title: Mapbox GL Directions - mapboxgl.Directions is not a constructor
body: <p>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 : </p>
  
  <pre><code>Uncaught TypeError: mapboxgl.Directions is not a constructor
      at HTMLDocument.&lt;anonymous&gt; (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)
  </code></pre>
  
  <p>Here is the code for my map : </p>
  
  <pre><code>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 &lt; 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');
      }
  });
  </code></pre>
  
  <p>In this code, with a for loop I try to create a routes between each markers with the following marker. </p>
  
  <p>In the header of the app I import mapbox :</p>
  
  <pre><code>&lt;script src='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'&gt;&lt;/script&gt;
  &lt;link href='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' /&gt;
  &lt;script src="https://cdn.jsdelivr.net/places.js/1/places.min.js"&gt;&lt;/script&gt;
  &lt;script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v3.1.1/mapbox-gl-directions.js'&gt;&lt;/script&gt;
  &lt;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' /&gt;
  </code></pre>
  
  <p>Doest someone know what is this error ?</p>