` }); // Add click event to open info window marker.addListener('click', () => { infoWindow.open(map, marker); }); // Add the location to the table using the "Type" column const row = document.createElement('tr'); row.innerHTML = ` ${location.Name} ${location.Type} Select Marker `; tableBody.appendChild(row); }); // Create the legend createLegend(map); }) .catch(error => console.error('Error fetching JSON data:', error)); } // Function to select and highlight the marker when clicked in the table function selectMarker(markerName) { const marker = allMarkers[markerName]; if (marker) { // Pan the map to the marker and open its info window map.panTo(marker.getPosition()); new google.maps.event.trigger(marker, 'click'); } } // Create the legend with checkboxes to toggle categories (using Category) function createLegend(map) { const legend = document.getElementById("legend"); const selectedCategories = new Set(); // Loop through each category in typeColors to create a checkbox Object.keys(typeColors).forEach(category => { const div = document.createElement("div"); div.innerHTML = ` ${category} `; div.style.cursor = "pointer"; div.style.marginBottom = "10px"; // Added margin between each entry legend.appendChild(div); // Add an event listener to handle checkbox selection and checkmark display const checkbox = div.querySelector("input"); checkbox.addEventListener("change", function() { if (this.checked) { selectedCategories.add(this.value); // Add a black checkmark using SVG this.style.backgroundImage = "url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolyline points=%229 11 12 14 22 4%22%3E%3C/polyline%3E%3C/svg%3E')"; this.style.backgroundSize = "14px"; this.style.backgroundPosition = "center"; this.style.backgroundRepeat = "no-repeat"; } else { selectedCategories.delete(this.value); // Remove the checkmark this.style.backgroundImage = "none"; } updateMarkers(selectedCategories, map); }); }); // Add the legend to the map map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend); } // Update markers to show only the selected categories or all categories if none selected function updateMarkers(selectedCategories, map) { // Ensure that selectedCategories is properly initialized and contains categories if (selectedCategories.size === 0) { Object.keys(markersByCategory).forEach(category => { if (markersByCategory[category]) { markersByCategory[category].forEach(marker => { marker.setMap(map); // Show all markers }); } }); return; } // Hide all markers Object.keys(markersByCategory).forEach(category => { if (markersByCategory[category]) { markersByCategory[category].forEach(marker => { marker.setMap(null); // Hide all markers }); } }); // Show only the selected categories selectedCategories.forEach(category => { if (markersByCategory[category]) { markersByCategory[category].forEach(marker => { marker.setMap(map); // Show markers for selected categories }); } }); } // Function to toggle the visibility of the table function toggleTable() { const tableContainer = document.getElementById('tableContainer'); if (tableContainer.style.display === 'none') { tableContainer.style.display = 'block'; } else { tableContainer.style.display = 'none'; } }