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]))
};
});
}
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…