document.addEventListener('DOMContentLoaded', function() { feather.replace(); // Initialize map const map = new google.maps.Map(document.getElementById('map'), { center: {lat: 0, lng: 0}, zoom: 2 }); // Search functionality const searchInput = document.getElementById('search-input'); const searchBtn = document.getElementById('search-btn'); const autocomplete = new google.maps.places.Autocomplete(searchInput); searchBtn.addEventListener('click', () => { const place = autocomplete.getPlace(); if (place.geometry) { map.setCenter(place.geometry.location); new google.maps.Marker({ map: map, position: place.geometry.location, title: place.name }); } }); // Directions functionality const originInput = document.getElementById('origin-input'); const destinationInput = document.getElementById('destination-input'); const directionsBtn = document.getElementById('directions-btn'); const directionsPanel = document.getElementById('directions-panel'); const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer({ map: map, panel: document.getElementById('directions-results') }); new google.maps.places.Autocomplete(originInput); new google.maps.places.Autocomplete(destinationInput); directionsBtn.addEventListener('click', () => { calculateAndDisplayRoute(); directionsPanel.classList.remove('hidden'); }); function calculateAndDisplayRoute() { directionsService.route({ origin: originInput.value, destination: destinationInput.value, travelMode: google.maps.TravelMode.DRIVING }, (response, status) => { if (status === 'OK') { directionsRenderer.setDirections(response); } else { alert('Directions request failed due to ' + status); } }); } });