mapbox-gl marker issue not sticking

Question

I am working on mapbox-gl marker configuration. It is not working properly when I add marker it goes at the bottom of the page and there is also problem with zoom-in and zoom-out when I zoom-in the map the marker is moving not stick to its position. Here is my implementation

loadMap() {
    (mapboxgl as typeof mapboxgl).accessToken = 'pk.eyJ1Ijoic2F1ZmlrIiwi******************************wP1AfA5Xy0FNFLRMjntFg';

   

    // street view  ---  mapbox://styles/mapbox/streets-v11
    // setallite view  --- mapbox://styles/mapbox/satellite-v9
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11', 
      center: [-65.017, -16.457],
      zoom: 1
    });

    // Add markers to the map.

    // Create a DOM element for each marker.
    const el = document.createElement('div');
    const width = 40;
    const height = 40;
    el.className = 'marker';
    el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`;
    el.style.width = `${width}px`;
    el.style.height = `${height}px`;
    el.style.backgroundSize = '100%';

    el.addEventListener('click', () => {
      window.alert(`Text -message`);
    });


    // Add markers to the map.
    new mapboxgl.Marker(el)
      .setLngLat([-66.324462, -16.024695])
      .addTo(map);

  }

Here is the image attached you can see in the below image the marker goes to the bottom.

Answer 1

You may be missing the js and css for the mapbox-gl please put these in index.html it will work.

 <link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>