let map;
let meteorData = [];
let markers = [];

// Load the map from the Google Maps JS API
function loadMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 0, lng: 0}, // Center of the globe
        zoom: 2
    });

    fetch("./js/Meteorite_Landings.json")
    .then((response) => response.json())
    .then(data => {
        meteorData = data.splice(0,500);
        filteredData = [...meteorData];
        drawMarkers(filteredData);
    })
    .catch(error => console.error(error));
};

function drawMarkers(data) {
    clearMarkers();
    const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
    
    // Add custom markers from meteor data
    data.forEach(location => {
        const lat = Number(location.reclat);
        const lng = Number(location.reclong);

        // Ignore entries that are not numbers (will cause errors)
        if (isNaN(lat) || isNaN(lng)) return;

        // Create marker from reclat and reclong
        const marker = new google.maps.Marker({
            position: { lat: lat, lng: lng},
            map: map,
            title: location.name
        });

        marker.addListener("click", () => { // Open and show the InfoWindow on click
            const content = `
                <div class="info-window">
                    <h3>${location.name}</h3>
                    <p><strong>Mass:</strong> ${location["mass (g)"]} g</p>
                    <p><strong>Year:</strong> ${location.year}</p>
                    <p><strong>Class:</strong> ${location.recclass}</p>
                    <p><strong>Fall Status:</strong> ${location.fall}</p>
                    <p><strong>Recorded Latitude:</strong> ${lat}</p>
                    <p><strong>Recorded Longitude:</strong> ${lng}</p>
                </div>`; // By doing this I have more control over what I put in the InfoWindow and how to style it
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
        });

        markers.push(marker);
    });
}

// Function to clear markers for use in drawMarkers()
function clearMarkers() {
    markers.forEach(marker => marker.setMap(null));
    markers = [];
}