Im using MapBox in one of my web aplicatins, nad my goal is to render a basic map on the page.
I have the following script:
<script>
mapboxgl.accessToken = mapToken;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
and to display the map, I use:
<div id='map' style='width: 400px; height: 300px;'></div>
The problem is, when I try to load the page, nothing happens and I get the following error: Uncaught ReferenceError: mapboxgl is not defined
I fixed the problem just by including this:
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />
in the head of the HTML file.