JS project 1 progress

2026-02-05 13:58:49 -05:00
parent 62b5583957
commit 49f188ff7d
3 changed files with 58 additions and 24 deletions
@@ -4,6 +4,36 @@ function loadMap() {
        center: {lat: 0, lng: 0}, // Center of the globe
        zoom: 2
    });
-}

-// Add custom markers from meteor data
+    const infoWindow = new google.maps.InfoWindow(); // create InfoWindow object to use later
+
+    // Add custom markers from meteor data
+    fetch("./js/Meteorite_Landings.json")
+    .then((response) => response.json())
+    .then(data => {
+        data.splice(0,500).forEach(location => {
+            const marker = new google.maps.Marker({
+                position: { lat: location.reclat, lng: location.reclong},
+                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> ${location.reclat}</p>
+                        <p><strong>Recorded Longitude:</strong> ${location.reclong}</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);
+            });
+        });
+    })
+    .catch(error => console.error(error));
+};
+