";
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v11", // You can change to your custom style if desired
center: [-84.3880, 33.7490], // Default center (Atlanta, GA)
zoom: 12
});
map.on("load", function () {
console.log("✅ Map initialized!");
// URL to your published Google Sheet as CSV
const sheetURL = "https://docs.google.com/spreadsheets/d/e/2PACX-1vQKmS20Pt-E8wxLOeDZWdSmfE6GifPMiu61yO607jQN3rS7rX0CBWHgsZutjhsk-N-luAjHnD19ijwG/pub?gid=1355765608&single=true&output=csv"; // e.g., "https://docs.google.com/spreadsheets/d/e/2PACX-1v...&output=csv"
// Fetch and parse CSV data using PapaParse
Papa.parse(sheetURL, {
download: true,
header: true,
dynamicTyping: true,
complete: function (results) {
console.log("✅ CSV data loaded:", results.data);
// Loop through each row and add a marker if valid
results.data.forEach(function (row) {
// Replace 'Latitude', 'Longitude', and 'Name' with your actual column headers if different
const lat = parseFloat(row.Latitude);
const lng = parseFloat(row.Longitude);
const name = row.Name || "Unnamed Location";
if (!isNaN(lat) && !isNaN(lng)) {
new mapboxgl.Marker({ color: "blue" })
.setLngLat([lng, lat])
.setPopup(new mapboxgl.Popup().setText(name))
.addTo(map);
console.log(`✅ Marker added: ${name} (${lat}, ${lng})`);
} else {
console.warn("⚠️ Invalid coordinates for row:", row);
}
});
},
error: function (error) {
console.error("❌ Error fetching CSV data:", error);
}
});
});
// Ensure the map resizes correctly when the window changes size
window.addEventListener("resize", function () {
map.resize();
console.log("✅ Map resized.");
});
}
// Wait until the DOM is fully loaded, then initialize the map
document.addEventListener("DOMContentLoaded", function () {
console.log("✅ DOM loaded, waiting for content...");
setTimeout(initializeMap, 2000); // Wait 2 seconds to allow HubSpot to load all content
});
