It appears that the issue lies in the way you are accessing the latitude and longitude values in your code. The Google Maps API library is minified, so variable names are often shortened to random characters. Instead of directly accessing x and y properties, it is recommended to use getters like lat() and lng() to prevent issues with future updates. This could be why your directions are not rendering correctly.

The correct way to retrieve lat and lng values is as follows:

results[0].geometry.location.lat().toFixed(3);
results[0].geometry.location.lng().toFixed(3);

For example, instead of the following lines:

step.start_location = new google.maps.LatLng(step.start_location.wa,step.start_location.ya);
step.end_location = new google.maps.LatLng(step.end_location.wa,step.end_location.ya);

You should use:

step.start_location = new google.maps.LatLng(step.start_location.lat(), step.start_location.lng());
step.end_location = new google.maps.LatLng(step.end_location.lat(), step.end_location.lng());

Storing Google Map Data is subject to terms of service restrictions. Please review the following limitations before proceeding with data storage:

10.1.3 Restrictions against Data Export or Copying.

    (a) No Unauthorized Copying, Modification, Creation of Derivative

Works, or Display of the Content. You must not copy, translate, modify, or create a derivative work (including creating or contributing to a database) of, or publicly display any Content or any part thereof except as explicitly permitted under these Terms. For example, prohibited actions include: (i) modifying map tiles on a server-side; (ii) combining multiple static map images for a larger map display than allowed in the Maps APIs Documentation; (iii) using the Content for generating mailing or telemarketing lists; or (iv) exporting or saving the Content to third-party location-based platforms or services.

    (b) No Pre-Fetching, Caching, or Storage of Content. You must not

pre-fetch, cache, or store any Content, except that you may store: (i) limited amounts of Content for the purpose of improving the performance of your Maps API Implementation if you do so temporarily, securely, and in a manner that does not permit use of the Content outside of the Service; and (ii) any content identifier or key that the Maps APIs Documentation specifically permits you to store. For instance, avoid creating an independent database of “places” using the Content.

    (c) No Mass Downloads or Bulk Feeds of Content. You must not use the

Service in a manner that gives you or any other person access to mass downloads or bulk feeds of any Content, including but not limited to numerical latitude or longitude coordinates, imagery, visible map data, or places data (including business listings). For example, refrain from offering batch geocoding services that utilize Content from the Maps API(s).

The code provided above was not working for me, so I decided to create my own solution. I have developed two functions that can serialize and deserialize a DirectionsResult object. These functions are designed to only include the essential data required for plotting a route. However, if you find that the deserialized DirectionsResult is missing certain features you need, you will have to customize the code by adding any additional attributes of the DirectionsResult object that you require.

I urge you not to misuse this code. Google has specific rules regarding the storage of Maps data, and it should only be stored temporarily (no longer than 30 calendar days).

//This function takes Google Maps API v3 directionsRequest and directionsResult objects as input.
//It returns a serialized directionsResult string.
function serializeDirectionsResult(directionsRequest, directionsResult) {
        var copyright = directionsResult.routes[0].copyrights;
        var travelMode = directionsRequest.travelMode;
        var startLat = directionsResult.routes[0].legs[0].start_location.lat();
        var startLng = directionsResult.routes[0].legs[0].start_location.lng();
        var endLat = directionsResult.routes[0].legs[0].end_location.lat();
        var endLng = directionsResult.routes[0].legs[0].end_location.lng();
        var steps = [];
        for (var i = 0; i < directionsResult.routes[0].legs[0].steps.length; i++){
                var pathLatLngs = [];
                for (var c = 0; c < directionsResult.routes[0].legs[0].steps[i].path.length; c++){
                        var lat = directionsResult.routes[0].legs[0].steps[i].path[c].lat();
                        var lng = directionsResult.routes[0].legs[0].steps[i].path[c].lng();
                        pathLatLngs.push( { "lat":lat , "lng":lng } );
                }
                steps.push( pathLatLngs );
        }
        var serialSteps = JSON.stringify(steps);
        //Return custom serialized directions result object.
        return copyright + "`" + travelMode + "`" + startLat + "`" + startLng + "`" + endLat + "`" + endLng + "`" + serialSteps;
}

//This function takes a serialized directionResult object string as input.
//It returns a directionResult object.
function deserializeDirectionsResult(serializedResult) {
        var serialArray = serializedResult.split("`");
        const travMode = serialArray[1];
        var directionsRequest = {
            travelMode: travMode,
            origin: new google.maps.LatLng(serialArray[2], serialArray[3]),
            destination: new google.maps.LatLng(serialArray[4], serialArray[5]),
        };
        var directionsResult = {};
        directionsResult.request = directionsRequest;
        directionsResult.routes = [];
        directionsResult.routes[0] = {};
        directionsResult.routes[0].copyrights = serialArray[0];
        directionsResult.routes[0].legs = [];
        directionsResult.routes[0].legs[0] = {};
        directionsResult.routes[0].legs[0].start_location = directionsRequest.origin;
        directionsResult.routes[0].legs[0].end_location = directionsRequest.destination;
        directionsResult.routes[0].legs[0].steps = [];
        var deserializedSteps = JSON.parse(serialArray[6]);
        for (var i = 0; i < deserializedSteps.length; i++){
                var dirStep = {};
                dirStep.path = [];
                for (var c = 0; c < deserializedSteps[i].length; c++){
                        var lat = deserializedSteps[i][c].lat;
                        var lng = deserializedSteps[i][c].lng;
                        var theLatLng = new google.maps.LatLng(lat, lng);
                        dirStep.path.push( theLatLng );
                }
                dirStep.travel_mode = travMode;
                directionsResult.routes[0].legs[0].steps.push( dirStep );
        }
        return directionsResult;
}

If you're still trying to resolve this particular issue, the solution lies in converting the Lat/Lng properties into google.maps.LatLng objects.

function processDirectionsResult(directions) {
    directions.routes.forEach(function (route) {
        route.legs.forEach(function (leg) {
            leg.end_location = new google.maps.LatLng(leg.end_location.lat, leg.end_location.lng)
            leg.start_location = new google.maps.LatLng(leg.start_location.lat, leg.start_location.lng)

            leg.steps.forEach(function (step) {
                step.end_location = new google.maps.LatLng(step.end_location.lat, step.end_location.lng);
                step.end_point = new google.maps.LatLng(step.end_point.lat, step.end_point.lng);
                step.start_location = new google.maps.LatLng(step.start_location.lat, step.start_location.lng);
                step.start_point = new google.maps.LatLng(step.start_point.lat, step.start_point.lng);

                step.lat_lngs.forEach(function (lat_lng) {
                    lat_lng = new google.maps.LatLng(lat_lng.lat, lat_lng.lng);
                });

                // Optional property
                if (step.hasOwnProperty('steps')) { 
                    step.steps.forEach(function (stepStep) {
                        stepStep.end_location = new google.maps.LatLng(stepStep.end_location.lat, stepStep.end_location.lng);
                        stepStep.start_location = new google.maps.LatLng(stepStep.start_location.lat, stepStep.start_location.lng);

                        stepStep.lat_lngs.forEach(function (lat_lng) {
                            lat_lng = new google.maps.LatLng(lat_lng.lat, lat_lng.lng);
                        });

                        stepStep.path.forEach(function (path_item) {
                            path_item = new google.maps.LatLng(stepStep.path.lat, stepStep.path.lng);
                        });
                    });
                }
            });
        });
    });

    return directions;   
}

If you're looking for another option, you might want to consider using lodash's _.cloneDeepWith method:

function convertToLatLng(previouslySerializedData) {
    return _.cloneDeepWith(previouslySerializedData, function (data) {
        if (data.lat !== undefined && data.lng !== undefined) {
            return new google.maps.LatLng(data.lat, data.lng);
        }
    });
}

This function will transform any LatLngLiteral into a LatLng object at all levels within the original data structure.