Javascript directions service not working? DIRECTIONS_ROUTE: NOT_FOUND

Question

In my Laravel blade file, I am trying to get directions to display between 2 markers when I select between 2 drop-down lists. However, whenever I select a dropdown I get an error saying the directions can't be found. This is exactly what the error says:

Directions request failed due to MapsRequestError: DIRECTIONS_ROUTE: NOT_FOUND: At least one of the origin, destination, or waypoints could not be geocoded.

HTML view:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/0.4.24/gmaps.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[key]"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="={{asset('js/app.js')}}"></script>

 <div id="floating-panel">
            <select id="start">
            @foreach ($crags as $crag=>$key)
                    <option data-la="{{$key->latitude}}" data-lo="{{$key->longitude}}" value="{{ $key->id }}">{{ $key->name_of_crag }}</option>
                @endforeach
            </select>

            <select id="end">
                @foreach ($crags as $crag)
                    <option value="{{ $crag->id }}">{{ $crag->name_of_crag }}</option>
                @endforeach

            </select>
        </div>
        <div id="map" style="width: 100%; height: 500px; clear: both"></div>

Javascript part

const markerArray = [];


                const directionsService = new google.maps.DirectionsService();
                const directionsRenderer = new google.maps.DirectionsRenderer({map:map});

                calculateAndDisplayRoute(
                    directionsRenderer,
                    directionsService,
                    markerArray,
                    map
                );

                const onChangeHandler = function () {
                    calculateAndDisplayRoute(
                        directionsRenderer,
                        directionsService,
                        markerArray,
                        map
                    );
                };

                document.getElementById("start").addEventListener("change", onChangeHandler);
                document.getElementById("end").addEventListener("change", onChangeHandler);


                function calculateAndDisplayRoute(
                    directionsRenderer,
                    directionsService,
                    markerArray,
                    map
                ){
                    // First, remove any existing markers from the map.
                    for (let i = 0; i < markerArray.length; i++) {
                        markerArray[i].setMap(null);
                    }
                    directionsService
                        .route({
                            origin: document.getElementById("start").value,
                            destination: document.getElementById("end").value,
                            travelMode: google.maps.TravelMode.WALKING,
                        })
                        .then((result) => {
                            // Route the directions and pass the response to a function to create
                            // markers for each step.
                            document.getElementById("warnings-panel").innerHTML =
                                "<b>" + result.routes[0].warnings + "</b>";
                            directionsRenderer.setDirections(result);
                            showSteps(result, markerArray, map);
                        })
                        .catch((e) => {
                            window.alert("Directions request failed due to " + e);
                        });
                }
                function showSteps(directionResult, markerArray, map) {

                    const myRoute = directionResult.routes[0].legs[0];
                    for (let i = 0; i < myRoute.steps.length; i++) {
                        const marker = (markerArray[i] =
                            markerArray[i] || new google.maps.Marker());

                        marker.setMap(map);
                        marker.setPosition(myRoute.steps[i].start_location);

                    }
                }
                window.initMap = initMap;