Spaces:
Running
Running
File size: 2,106 Bytes
630b18b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 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);
}
});
}
}); |