--> // Select the curriculum tab and direction element const curriculumTab = document.getElementById('pills-curriculum-tab'); const directionElement = document.getElementById('Direction'); function showTooltip() { directionElement.classList.add('show-tooltip'); setTimeout(function () { directionElement.classList.remove('show-tooltip'); }, 5000); // Tooltip will disappear after 3 seconds } window.onload = function () { showTooltip(); }; // Declare variables globally to ensure they are accessible let directionsService, directionsRenderer, map, fromLocation, toLocation; // Initialize the map function initMap() { // Set the "to" location dynamically (this should be set from backend or static values for now) toLocation = { lat: , lng: }; // Replace with your backend values // Use Geolocation API to get the user's current location if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { // Set the current location (fromLocation) fromLocation = { lat: position.coords.latitude, lng: position.coords.longitude }; // Initialize the map map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: fromLocation }); // Add markers for both locations new google.maps.Marker({ position: fromLocation, map: map, title: "Your Current Location" }); new google.maps.Marker({ position: toLocation, map: map, title: "Destination" }); // Initialize the DirectionsService and DirectionsRenderer directionsService = new google.maps.DirectionsService(); directionsRenderer = new google.maps.DirectionsRenderer({ map: map }); // Display directions for the initial travel mode (e.g., driving) //calculateAndDisplayRoute('DRIVING'); // Add event listener for dropdown change to update travel mode //document.getElementById('travelMode').addEventListener('change', function () { // const selectedMode = this.value; // calculateAndDisplayRoute(selectedMode); //}); // Add event listener to redirect to Google Maps for the directions on map click document.getElementById('Direction').addEventListener('click', function () { if (fromLocation && toLocation) { const destinationUrl = `https://www.google.com/maps/dir/${encodeURIComponent(fromLocation.lat + ',' + fromLocation.lng)}/${encodeURIComponent(toLocation.lat + ',' + toLocation.lng)}`; window.open(destinationUrl, '_blank'); } else { document.getElementById('output').innerText = 'Location data not available.'; } }); }, function (error) { console.error('Geolocation Error:', error); document.getElementById('output').innerText = 'Unable to retrieve your current location.'; } ); } else { document.getElementById('output').innerText = 'Geolocation is not supported by your browser.'; } } // Function to calculate and display the route based on the selected travel mode function calculateAndDisplayRoute(travelMode) { // Create a request to fetch directions from `fromLocation` to `toLocation` const request = { origin: fromLocation, destination: toLocation, travelMode: google.maps.TravelMode[travelMode] }; directionsService.route(request, function (response, status) { if (status === 'OK') { // Render the route on the map directionsRenderer.setDirections(response); // Extract distance and duration from the response and display them const distance = response.routes[0].legs[0].distance.text; const duration = response.routes[0].legs[0].duration.text; // Update the output section with distance, duration, and travel mode document.getElementById('output').innerHTML = ` `; } else { console.error('Directions request failed due to:', status); document.getElementById('output').innerText = 'Unable to fetch directions.'; } }); }