使谷歌地图自动加载并显示两个位置之间的距离

Question

I wrote a script with google maps integration. User can enter two location and calculate the distance between the location. It working fine.

This is original script for user enter location.

<script type="text/javascript">

    var source, destination;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    google.maps.event.addDomListener(window, 'load', function () {
        new google.maps.places.SearchBox(document.getElementById('txtSource'));
        new google.maps.places.SearchBox(document.getElementById('txtDestination'));
        directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
    });

    function GetRoute() {
        var kl = new google.maps.LatLng(3.1292407,101.6121316);
        var mapOptions = {
            zoom: 7,
            center: kl
        };
        map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
        directionsDisplay.setMap(map);

        //*********DIRECTIONS AND ROUTE**********************//
        source = document.getElementById("txtSource").value;
        destination = document.getElementById("txtDestination").value;

        var request = {
            origin: source,
            destination: destination,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }
        });

        //*********DISTANCE AND DURATION**********************//
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix({
            origins: [source],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.METRIC,
            avoidHighways: false,
            avoidTolls: false
        }, function (response, status) {
            if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                var distance = response.rows[0].elements[0].distance.text;
                var duration = response.rows[0].elements[0].duration.text;
                var dvDistance = document.getElementById("dvDistance");
                dvDistance.innerHTML = "";
                dvDistance.innerHTML += "Distance: " + distance + "<br />";
                dvDistance.innerHTML += "Duration:" + duration;

            } else {
                alert("Unable to find the distance via road.");
            }
        });
    }
</script>

This is the table for user enter location. If user clicked submit the distance will display in google map below.

<table border="0" cellpadding="0" cellspacing="3">
                        <tr>
                            <td colspan="2">
                                Source:
                                <input type="text" id="txtSource" value="{{ $carpool->from }}" style="width: 200px" />
                                &nbsp; Destination:
                                <input type="text" id="txtDestination" value="{{ $carpool->destination }}" style="width: 200px" />
                                <br />
                                <input type="button" value="Get Route" onclick="GetRoute()" />
                                <hr />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <div id="dvDistance">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div id="dvMap" style="width: 500px; height: 500px">
                                </div>
                            </td>
                        </tr>
                    </table>

Now i want to display the distance automatically in other pages. The problems is the script cannot calculate the data which loaded from database. I am using laravel 5 as backend. I tried to pass the data into here but failed to calculate the distance.

//*********DIRECTIONS AND ROUTE**********************//
    source = '{{ $user->start}}';
    destination = '{{ $user->end}}';

Anyone can help me?