How to get the kilometers of two places using jquery using google map latlng

Question

I need to display the distance in kilometers of two places. Places are now showing in the drop-downbox. it's perfectly working. but the kilometers are not showing. I need to get the price based on the distance.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRBO5tQ2uSfSj0DskoBkXSiSbVCPa-eKM&amp;language=en&amp;libraries=places,geometry&amp;callback=initMap"></script>

<script>
    function initMap() {
        pickup = new google.maps.places.Autocomplete(
            (document.getElementById('pickup')), {
                //types: ['establishment'],
                componentRestrictions: { 'country': 'qa' }
        });
        pickup.addListener('place_changed', function () {
            var title = pickup.getPlace().name;
            var lat = pickup.getPlace().geometry.location.lat();
            var lng = pickup.getPlace().geometry.location.lng();
            var types = pickup.getPlace().types;
           

            //SEND AJAX HERE
            $.ajax({
                
                data: { title: title, lat: lat, lng: lng },
                type: 'post',
                success: function (response) {
                    $("#origin").val(response);
                }
            });
        });


        dropup = new google.maps.places.Autocomplete(
            (document.getElementById('dropup')), {
                //types: ['(cities)'],
                componentRestrictions: { 'country': 'qa' }
        });
        dropup.addListener('place_changed', function () {

            var title = dropup.getPlace().name;
            var lat = dropup.getPlace().geometry.location.lat();
            var lng = dropup.getPlace().geometry.location.lng();
            var types = dropup.getPlace().types;
            

            //SEND AJAX HERE
            $.ajax({
               
                data: { title: title, lat: lat, lng: lng },
                type: 'post',
                success: function (response) {
                    $("#destination").val(response);
                    if ($("#destination").val() == $("#origin").val()) {
                        $('#SameLocError').show();
                    } else {
                        $('#SameLocError').hide();
                    }
                }
            });
        });
    }

    function initMap2() {
        pickup = new google.maps.places.Autocomplete(
            (document.getElementById('pickup')), {
                //types: ['establishment'],
                componentRestrictions: { 'country': 'qa' }
            });
        pickup.addListener('place_changed', function () {

            var title = pickup.getPlace().name;
            var lat = pickup.getPlace().geometry.location.lat();
            var lng = pickup.getPlace().geometry.location.lng();
            var types = pickup.getPlace().types;
           

           
            //SEND AJAX HERE
            $.ajax({
              
                data: { title: title, lat: lat, lng: lng },
                type: 'post',
                success: function (response) {
                    $("#origin").val(response);
                    if ($("#destination").val() == $("#origin").val()) {
                        $('#SameLocError').show();
                    } else {
                        $('#SameLocError').hide();
                    }
                }
            });
        });
    }
</script>

my laravel code

 <input type="text" id="pickup" name="pickup" class="form-control" />