javascript - How do I generate several different MapBox maps

Question

I'm trying to build a website where a user types in a city and venue and a bunch of venues load up with maps in each venue container. What happens is that only the markers show up and only the last venue on the list shows the actual map, the other map containers are blank.

Picture on what happens.

Code that I tried:

mapboxgl.accessToken = 'ACCESSTOKEN123';
let maps = {}, markers = {};

export function loadVenues(venues, container) {
  container.innerHTML = "";
  venues.forEach(venue => {
    const {
      name,
      id,
      lat,
      lng
    } = venue;

    // ADDING VENUE
    container.innerHTML += `
      <div class="col">
        <div class="venue" id="venue${id}">

          <h3 class="card-title">${name}</h3>

          <div class="map-content">
            <div id=${id} class='venue-map'></div>

            <button class="btn btn-secondary rounded-circle venue-point">
              <img src="./style/images/icons8_next_page_100px.png" alt="">
            </button>
          </div>

        </div>
      </div>
    `;

    // MAKING MAP
    maps = {
      ...maps,
      ["map" + id]: (new mapboxgl.Map({
        container: id,
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/dark-v10',
        zoom: 15
        }))
    };

    // MAKING MARKER
    markers = {
      ...markers,
      ["marker" + id]: (new mapboxgl.Marker({
        color: "#5B43EF",
      })
      .setLngLat([lng, lat])
      .addTo(maps["map" + id]))
    };

  });
}

Answer 1

Do you have a JSFiddle or JSbin where you're testing this? If so, can you please post it here along with your question? It seems as though there may be an issue with your forEach loop.