64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
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,35);
|
|
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 = [];
|
|
} |