How to create pickup Distance Calculation miles pricing in WordPress

I am trying to pick up Distance Calculation miles pricing in WordPress but I have not succeeded yet. any help would be appreciated.

Here is my code. but I don’t know what is wrong with my code.

HTML Form
in WordPress where users can input the pickup and destination locations.

function google_maps_distance_calculator_shortcode() {
    ob_start();
    ?>
    <div class="distance-calculator-form">
        <form id="distance-calculator-form">
            <h2>Calculate Distance and Cost</h2>

            <label for="pickup">Pickup Location:</label>
            <input type="text" id="pickup" name="pickup" placeholder="Enter pickup location"><br>

            <label for="destination">Destination Location:</label>
            <input type="text" id="destination" name="destination" placeholder="Enter destination location"><br>

            <p>Distance: <span id="distance">0 km</span></p>
            <p>Total Cost: <span id="total-cost">$0.00</span></p>

            <!-- Button to calculate distance and cost -->
            <button type="button" id="calculate-button">Calculate Distance & Cost</button>
        </form>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('google_maps_distance_calculator', 'google_maps_distance_calculator_shortcode');

JavaScript to Calculate Distance Using Google Maps API

document.addEventListener('DOMContentLoaded', function() {
    let map;
    let directionsService;
    let directionsRenderer;

    function initMap() {
        // Initialize the Google Maps objects
        directionsService = new google.maps.DirectionsService();
        directionsRenderer = new google.maps.DirectionsRenderer();
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        directionsRenderer.setMap(map);
    }

    function calculateDistance() {
        const pickup = document.getElementById('pickup').value;
        const destination = document.getElementById('destination').value;

        if (pickup && destination) {
            const request = {
                origin: pickup,
                destination: destination,
                travelMode: 'DRIVING'
            };

            directionsService.route(request, function(result, status) {
                if (status == 'OK') {
                    directionsRenderer.setDirections(result);

                    const distance = result.routes[0].legs[0].distance.value / 1000; // distance in km
                    const cost = distance * 2; // Example: $2 per km

                    document.getElementById('distance').textContent = distance.toFixed(2) + ' km';
                    document.getElementById('total-cost').textContent = '$' + cost.toFixed(2);
                } else {
                    alert('Could not calculate distance: ' + status);
                }
            });
        } else {
            alert('Please enter both pickup and destination locations.');
        }
    }

    document.getElementById('calculate-button').addEventListener('click', calculateDistance);

    // Load the map
    initMap();
});

Add Google Maps Script to Your WordPress Site

function enqueue_google_maps_script() {
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places', null, null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_google_maps_script');

Add Styling

.distance-calculator-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.distance-calculator-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.distance-calculator-form input[type="text"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#calculate-button {
    background-color: #007cba;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#calculate-button:hover {
    background-color: #005f8d;
}

#distance, #total-cost {
    font-weight: bold;
}