Consuming Google Maps Directions Service

GoogleMapsDirecsSvcConsume.js

var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var sa = new google.maps.LatLng(29.578306, -98.440629);
            var mapOptions = {
                zoom: 7,
                center: sa
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
        }
        function calcRoute() {
            var start = document.getElementById('start').value;
            var end = document.getElementById('end').value;
            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.TravelMode.DRIVING
            }
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    showDistance(response);
                }

            });
        }

        function showDistance(directionResult) {
       
            var myDistance = directionResult.routes[0].legs[0].distance;
            var myDistanceText = myDistance.text;
            document.getElementById('outputDiv').innerHTML = myDistanceText;

        }

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