Spaces:
Running
Running
| 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); | |
| } | |
| }); | |
| } | |
| }); |