Google maps, distance text dissapears after dragging the route

Question

finally got my google map draggable directions working, but after I drag the route a few lines of the text dissapear : ("Trumpiausia distancija tarp dviejų lokacijų, važiuojant keliais: ")- Total Distance , and ("Apytikslis kelionės laikas: ") - Total Time. Although total distance is shown and recalculates perfectly.

Any ideas how to fix it? I know it's a simple question, but I'm new to javascript. Thanks

var location1;
var location2;

var address1;
var address2;

var latlng;
var geocoder;
var map;

var distance;

// finds the coordinates for the two locations and calls the showMap() function
function initialize()
{
    geocoder = new google.maps.Geocoder(); // creating a new geocode object

    // getting the two address values
    address1 = document.getElementById("address1").value;
    address2 = document.getElementById("address2").value;

    // finding out the coordinates
    if (geocoder) 
    {
        geocoder.geocode( { 'address': address1}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of first address (latitude + longitude)
                location1 = results[0].geometry.location;
            } else 
            {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        geocoder.geocode( { 'address': address2}, function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                //location of second address (latitude + longitude)
                location2 = results[0].geometry.location;
                // calling the showMap() function to create and show the map 
                showMap();
            } else 
            {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
}

// creates and shows the map
function showMap()
{
    // center of the map (compute the mean value between the two locations)
    latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);

    // set map options
        // set zoom level
        // set center
        // map type
    var mapOptions = 
    {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    // create a new map object
        // set the div id where it will be shown
        // set the map options
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



  var rendererOptions = {
 draggable: true};
     // show route between the points
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

    directionsDisplay.setMap(map);
    var request = {
        origin:location1, 
        destination:location2,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
  directionsDisplay.setPanel(document.getElementById('directionsPanel'));

    directionsService.route(request, function(response, status) 
    {
        if (status == google.maps.DirectionsStatus.OK) 
        {
            directionsDisplay.setDirections(response);
            distance = "Trumpiausia distancija tarp dviejų lokacijų, važiuojant keliais: "  +response.routes[0].legs[0].distance.text;
            distance += "<br/>Apytikslis kelionės laikas: " +response.routes[0].legs[0].duration.text;
            document.getElementById("distance_road").innerHTML = distance;
        }
function computeTotalDistance(result) {
var total = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
total += myroute.legs[i].distance.value
}
total = total / 1000.0;
document.getElementById('distance_road').innerHTML = total + ' km';

}
 google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
computeTotalDistance(directionsDisplay.getDirections());
    });

    });
    // show a line between the two points
    var line = new google.maps.Polyline({
        map: map, 
        path: [location1, location2],
        strokeWeight: 7,
        strokeOpacity: 0.8,
        strokeColor: "#FFAA00"
    });

    // create the markers for the two locations     
    var marker1 = new google.maps.Marker({
        map: map, 
        position: location1,
        title: "First location"
    });
    var marker2 = new google.maps.Marker({
        map: map, 
        position: location2,
        title: "Second location"
    });

    // create the text to be shown in the infowindows
    var text1 = '<div id="content">'+
            '<h1 id="firstHeading">First location</h1>'+
            '<div id="bodyContent">'+
            '<p>Coordinates: '+location1+'</p>'+
            '<p>Address: '+address1+'</p>'+
            '</div>'+
            '</div>';

    var text2 = '<div id="content">'+
        '<h1 id="firstHeading">Second location</h1>'+
        '<div id="bodyContent">'+
        '<p>Coordinates: '+location2+'</p>'+
        '<p>Address: '+address2+'</p>'+
        '</div>'+
        '</div>';

    // create info boxes for the two markers
    var infowindow1 = new google.maps.InfoWindow({
        content: text1
    });
    var infowindow2 = new google.maps.InfoWindow({
        content: text2
    });

    // add action events so the info windows will be shown when the marker is clicked
    google.maps.event.addListener(marker1, 'click', function() {
        infowindow1.open(map,marker1);
    });
    google.maps.event.addListener(marker2, 'click', function() {
        infowindow2.open(map,marker1);
    });

    // compute distance between the two points
    var R = 6371; 
    var dLat = toRad(location2.lat()-location1.lat());
    var dLon = toRad(location2.lng()-location1.lng()); 

    var dLat1 = toRad(location1.lat());
    var dLat2 = toRad(location2.lat());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(dLat1) * Math.cos(dLat1) * 
            Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;

    document.getElementById("distance_direct").innerHTML = "<br/>Atstumas tarp dviejų lokacijų (tiesią liniją) : "+d;
}

function toRad(deg) 
{
    return deg * Math.PI/180;
}

Answer 1

Found out myself, maybe it will be usefull for someone else.

    function computeTotalDistance(result) {
 var distance = 0;
 var myroute = result.routes[0];
 for (var i = 0; i < myroute.legs.length; i++) {
 distance += myroute.legs[i].distance.value;
}
distance = distance / 1000.0;
document.getElementById('distance_road').innerHTML ="Distancija tarp dviejų lokacijų, važiuojant keliais: "+distance + ' km';