緯度と経度のoverview_pathグーグルマップを更新する

誰かが私がグーグルマップAPIv3で持っている小さな問題で私を助けてくれることを願っています。

出発地と目的地を選択できるウェブページを開発しており、ルートとすべての緯度と経度の座標を計算し、マーカーを移動できます。

問題は、マーカーを移動するときに、[座標]パネルを新しい値で更新したいのですが、更新されないことです。

誰かが助けてくれることを願って、コードと画像のペアを追加しています。

どうもありがとう！

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>

    var rendererOptions = {
        draggable: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
    var directionsService = new google.maps.DirectionsService();
    var map;

    var trucka = new google.maps.LatLng(21.984797, -102.27668);

    function initialize() {

        var mapOptions = {
            zoom: 7,
            center: trucka
        };
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        //directionsDisplay.setPanel(document.getElementById('directionsPanel'));
        directionsDisplay.setPanel(document.getElementById('hola'));


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

        calcRoute();
    }

    function calcRoute() {
        alert('carajo');
        var lat = document.getElementById('hdnLatitudOrigen').value;
        var lon = document.getElementById('hdnLongitudOrigen').value;
        var request = {
            origin: new google.maps.LatLng(lat, lon),
            destination: new google.maps.LatLng(document.getElementById('hdnLatitudDestino').value, document.getElementById('hdnLongitudDestino').value),
            /* waypoints: [
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada1').value, document.getElementById('hdnLongitudParada1').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada2').value, document.getElementById('hdnLongitudParada2').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada3').value, document.getElementById('hdnLongitudParada3').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada4').value, document.getElementById('hdnLongitudParada4').value) },
                 { location: new google.maps.LatLng(document.getElementById('hdnLatitudParada5').value, document.getElementById('hdnLongitudParada5').value) }
             ],*/
            travelMode: google.maps.TravelMode.DRIVING,
            provideRouteAlternatives: true,
            avoidHighways: false,
            avoidTolls: false
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                if (response.routes && response.routes.length > 0) {
                    var routes = response.routes;
                    for (var j = 0; j < routes.length; j++) {
                        var points = routes[j].overview_path;
                        var ul = document.getElementById("vertex");
                        for (var i = 0; i < points.length; i++) {
                            var li = document.createElement('li');
                            li.innerHTML = getLiText(points[i]);
                            ul.appendChild(li);
                        }
                    }
                }
            }
        });
    }

    function getLiText(point) {
        var lat = point.lat(),
            lng = point.lng();
        return "lat: " + lat + " lng: " + lng;
    }

    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('total').innerHTML = total + ' km';
    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="map-canvas" style="float: left; width: 70%; height: 100%"></div>
<div id="hola">
    <label>Puntos</label>
    <ul id="vertex">
    </ul>
</div>
<div id="directionsPanel" style="float: right; width: 30%; height 100%">
    <p>Total Distance: <span id="total"></span></p>
</div>