Код отображается на Codepen, но не на моем сайте. ⇐ CSS

[Anonymous]

Я совершенно новичок в программировании, и это мой первый проект.
Я создал карту в Codepen, которая очень хорошо выполняет то, что я хочу. Как только я добавляю его на свой сайт, он даже не появляется. Я проверил с помощью F12, но проблема в том, что я не понимаю сообщений об ошибках. Вот конкретный пост: https://agora-tours.com/get-to-know-all ... islands-2/
И как Я добавил его на данный момент:

Код: Выделить всё

Galapagos Visitor Sites





body {
margin: 0;
font-family: "Montserrat", Arial, sans-serif;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
}

#sidebar {
position: absolute;
top: 0;
left: 0;
width: 33%;
height: 100%;
background-color: #5e95c2;
z-index: 2;
overflow-y: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
}

#sidebar.hidden {
display: none;
}

#sidebar img {
width: 100%;
object-fit: cover;
}

#sidebar h2,
#sidebar h3,
#sidebar h4 {
color: #fff;
text-align: left;
}

#sidebar h2 {
text-transform: uppercase;
font-size: 18px;
margin: 10px 0;
}

#sidebar h3 {
font-size: 18px;
}

#sidebar h4 {
font-size: 18px;
margin: 10px 0 5px;
}

#sidebar p {
color: #fff;
font-size: 18px;
text-align: left;
}

hr {
border: none;
border-top: 1px solid #fff;
margin: 10px 0;
width: 100%;
}

#close-sidebar {
align-self: flex-start;
background-color: #2b4e6e;
color: #fff;
border: none;
padding: 5px 10px;
font-size: 18px;
cursor: pointer;
margin-bottom: 20px;
border-radius: 4px;
}

.marker-dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
background-color: #000;
z-index: 1;
}

.marker-dot.active {
background-color: #000;
}

.cruise {
background-color: #ff8000;
}
.day-tour {
background-color: #5e95c2;
}
.day-tour-diving {
background-color: #2b4e6e;
}
.liveaboard {
background-color: #f9b233;
}





×

[img]placeholder.jpg[/img]



[h4]Island[/h4]


[h4]Accessibility via[/h4]


[h4]Activities[/h4]




/* jshint esversion: 6 */

mapboxgl.accessToken =
"pk.eyJ1IjoiYWdvcmE5OCIsImEiOiJjbTBsY3VoZTkwNDRvMmtweWFraGxoZG1zIn0.swUOxThaoMCZLt4h9yq4lQ";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11",
center: [-90.9, -0.5],
zoom: 7
});

// Define category colors
const categoryColors = {
Cruise: "cruise",
"Day Tour": "day-tour",
"Day Tour Diving": "day-tour-diving",
Liveaboard: "liveaboard"
};

// List of destinations
const destinations = [
{
name: "Las Tintoreras",
island: "Isabela",
accessibility: "Day Tour, Day Tour Diving & Cruise",
activity: "Snorkeling, Walking & Kayaking",
description:
'Las Tintoreras is a group of small islets located just off the coast of Puerto Villamil on Isabela Island, known for their stunning volcanic landscapes and abundant wildlife. Accessible by kayak or a short boat ride, this site offers a unique opportunity to observe white-tip reef sharks (locally called "tintoreras") resting in calm lava channels. Visitors can also spot sea turtles, marine iguanas, and Galapagos penguins.  The islets are also home to vibrant birdlife, including blue-footed boobies and pelicans.',
coordinates: [-90.9596, -0.9689],
image: "https://agora-tours.com/wp-content/uploads/2024/12/IMG_7758-1-scaled.jpg",
category: "Day Tour"
}
];
const sidebar = document.getElementById("sidebar");
const sidebarImage = document.getElementById("sidebar-image");
const siteName = document.getElementById("site-name");
const siteIsland = document.getElementById("site-island");
const siteAccessibility = document.getElementById("site-accessibility");
const siteActivity = document.getElementById("site-activity");
const siteDescription = document.getElementById("site-description");
const closeSidebarButton = document.getElementById("close-sidebar");

// Store the initial map center
let initialCenter = map.getCenter();

// Create markers and add event listeners
destinations.forEach((destination) => {
const markerElement = document.createElement("div");
markerElement.classList.add(
"marker-dot",
categoryColors[destination.category]
);

const marker = new mapboxgl.Marker(markerElement)
.setLngLat(destination.coordinates)
.addTo(map);
markerElement.addEventListener("click", () => {
document
.querySelectorAll(".marker-dot")
.forEach((dot) => dot.classList.remove("active"));

// Add 'active' class to the clicked dot
markerElement.classList.add("active");

// Fly map marker location
map.flyTo({
center: destination.coordinates,
zoom: 10,
essential: true
});

// Show sidebar with destination details
showSidebar(destination);
});
});
function showSidebar(destination) {
sidebar.classList.remove("hidden");
sidebarImage.src = destination.image;
siteName.textContent = destination.name;
siteIsland.textContent = destination.island;
siteAccessibility.textContent = destination.accessibility;
siteActivity.textContent = destination.activity;
siteDescription.textContent = destination.description;
}

// Close sidebar
closeSidebarButton.addEventListener("click", () => {
sidebar.classList.add("hidden");

// Fly the map back to default
map.flyTo({
center: initialCenter,
zoom: 7,
essential: true
});
});

Я проверил свой код, проверил с помощью F12, но, к сожалению, не понимаю сообщений об ошибках. Что мне нужно изменить, чтобы карта отображалась?

Подробнее здесь: https://stackoverflow.com/questions/792 ... my-website