Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Travel Fee Calculator</title>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQcdlrfHR1dj-4qzqkPuG_uKTEh-tNTV0&libraries=places"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            margin: 0;
            box-sizing: border-box;
        }
        h2 {
            font-size: 22px; /* Adjusted title size */
            text-align: center; /* Centered title */
            margin-bottom: 15px; /* Space below title */
        }
        p {
            text-align: center; /* Centered instructions */
            font-size: 16px; /* Consistent font size */
            margin-bottom: 10px; /* Space below instructions */
        }
        #user-address {
            width: 100%; /* Full-width input */
            padding: 10px; /* Padding for ease of use */
            box-sizing: border-box;
            margin-bottom: 10px; /* Space below input */
        }
        #fee-result {
            text-align: center; /* Centered text */
            font-size: 16px; /* Consistent font size */
            margin-top: 10px; /* Space above result */
        }
    </style>
</head>
<body>
    <h2>Travel Fee Calculator</h2> 

    <p>Enter your address to estimate the travel fee:</p> 

    
    <input type="text" id="user-address" placeholder="Enter your address" /> 

    
    <p id="fee-result">Estimated Travel Fee: </p> 

    <script>
        const startingPoint = "34960 Atlantic Ave, Clarksville, DE 19970"; // Your starting point
        let autocomplete;

        function initAutocomplete() {
            const addressInput = document.getElementById("user-address");

            // Initialize Google Maps Autocomplete
            autocomplete = new google.maps.places.Autocomplete(addressInput);

            // Trigger fee calculation when an address is selected
            autocomplete.addListener("place_changed", function() {
                const place = autocomplete.getPlace();
                if (!place.geometry) {
                    document.getElementById("fee-result").innerText = "Invalid address. Please try again.";
                    return;
                }

                calculateFee(place.geometry.location); // Calculate the fee
            });
        }

        function calculateFee(location) {
            const geocoder = new google.maps.Geocoder();

            geocoder.geocode({ location: location }, function(results, status) {
                if (status === 'OK') {
                    const latDiff = results[0].geometry.location.lat() - 38.5533; // Latitude difference for distance approximation
                    const durationInMinutes = 15; // Simulated travel duration

                    // Calculate the travel fee based on distance or duration
                    let travelFee = Math.max(latDiff * 4, durationInMinutes * 2);
                    travelFee = Math.max(travelFee, 20); // Minimum fee
                    travelFee is rounded to the nearest $5 increment

                    document.getElementById("fee-result").innerText = `Estimated Travel Fee: $${travelFee.toFixed(2)}`;

                } else {
                    document.getElementById("fee-result").innerText = "Error estimating the travel fee.";
                }
            });
        }

        // Initialize autocomplete on page load
        window.onload = initAutocomplete; // Set up autocomplete
    </script>
</body>
</html>