Uncaught Référence Erreur: mapboxgl est pas défini

Question

Je suis dynamique chargeais de cette manière MapBox-GL JS:

 var script = domConstruct.create("script"); 
     script.type = "text/javascript"; 
     script.charset = "utf-8"; 
     script.onload = instantiateMap(); 
     script.src = "https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"; 
     script.async = false; 
     document.getElementsByTagName("head")[0].appendChild(script); 

Puis à un moment donné, j'accède comme suit dans la fonction « instantiateMap »:

 mapboxgl.accessToken = 'pk.eyJ1IjoibW11a2ltIiwiYSI6ImNqNnduNHB2bDE3MHAycXRiOHR3aG0wMTYifQ.ConO2Bqm3yxPukZk6L9cjA'; 
     var map = new mapboxgl.Map({ 
     container: mapParent, 
     style: 'mapbox://styles/mapbox/streets-v9' 
     }); 

dès que ma commande atteint la ligne (mapboxgl.accessToken ...) il me donne l'erreur suivante sur Chrome Console:

Uncaught ReferenceError: mapboxgl is not defined 
    at Object._instantiateMap (VM2337 Sample.js:282) 
_instantiateMap @ VM2337 Sample.js:282 

Cet extrait de code particulier fonctionne correctement dans les situations suivantes: - L'inclusion dynamique de Mapbox-GL.js fonctionne également correctement dans un fichier HTML indépendant. - Inclusion statique de la bibliothèque dans les fichiers HTML.

Je sais que la bibliothèque se charge bien car je le vois dans le panneau de gauche sous Sources, mais je n'ai aucune idée de la raison pour laquelle lors de l'accès à l'objet mapboxgl, cette erreur apparaît.

J'ai également essayé d'inclure d'autres bibliothèques (jQuery, mapbox.js) de la même manière et elles fonctionnent bien.

Toute aide serait grandement appréciée!

Answer 1

Sans voir le code source, je ne peux pas tester ou corriger l'erreur. Je suppose que le script n'est pas chargé avant l'instanciation, soit en raison de la taille du script ou de l'ordre du code.

Personnellement, j'utiliser des fonctions callback pour ce faire en sorte instanciation ne se produit que lorsque le fichier a été entièrement téléchargé (non testé)

JavaScript.load("https://api.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js", function() { 
     mapboxgl.accessToken = 'pk.eyJ1IjoibW11a2ltIiwiYSI6ImNqNnduNHB2bDE3MHAycXRiOHR3aG0wMTYifQ.ConO2Bqm3yxPukZk6L9cjA'; 
     var map = new mapboxgl.Map({ 
     container: mapParent, 
     style: 'mapbox://styles/mapbox/streets-v9' 
     }); 
    }); 

    var JavaScript = { 
     load: function(src, callback) { 
     var script = document.createElement('script'), 
      loaded; 
     script.setAttribute('src', src); 
     if (callback) { 
      script.onreadystatechange = script.onload = function() { 
      if (!loaded) { 
       callback(); 
      } 
      loaded = true; 
      }; 
     } 
     document.getElementsByTagName('head')[0].appendChild(script); 
     } 
    };