geoglide-navigator / script.js
mohanohi's picture
https://maps.app.goo.gl/svpo5ZNX8B5FasFE7
630b18b verified
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);
}
});
}
});