google auto search and mao integration

@{
    ViewBag.Title = "Index";
}



<style type="text/css">
    .tab-content > .active {
        display: block !important;
        visibility: visible !important;
    }

    .tab-content > .tab-pane {
        display: none;
        visibility: hidden;
    }


    .fieldSetClass {
        background-color: white;
    }

    .form-control {
        border: 1px solid #25b9c5;
        border-radius: 0px;
    }

    .clsTabBackground {
        background-color: #3498DB;
        border-radius: 1px;
        font-size: 14px;
        font-weight: 600;
        float: left;
        color: white;
        border: 1px solid #33485C;
        margin-left: 5px;
    }

    #MapService-canvasLoad {
        height: 100%;
        width: 100%;
    }

    #MapService-canvasLoad {
        height: 100%;
        width: 100%;
    }

    /*.a:hover, a:focus, .btn-link:hover, .btn-link:focus {
        color: white;
        text-decoration: none;
    }*/

    .clsTabSelecteBackground {
        background-color: gray;
        border-radius: 1px;
        font-size: 14px;
        font-weight: 600;
        float: left;
        color: white;
        border: 1px solid #33485C;
        margin-left: 5px;
    }

    .tabDivColor {
        color: white;
        font-weight: 700;
        font-size: 13px;
    }

    .a:hover, a:focus, .btn-link:hover, .btn-link:focus {
        color: blue;
        text-decoration: none;
    }
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBv5jCBWXtiHa1wAOwd670y6VLxB1MJfTg&libraries=places&callback=initAutocompleteLoad" async defer></script>
<script src="~/scripts/jquery-3.4.1.js"></script>
<script>


    function myMap() {

        var mapProp = {
            center: new google.maps.LatLng(19.07, 72.8777),
            zoom: 25,
        };
        var map = new google.maps.Map(document.getElementById("googleMapForLoad"), mapProp);
    }

    var src = "images/flight.png";
    var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
    var srcLat = "", srcLong = "", destLat = "", destLog = "";
    function initMapLoad() {

        if ($("#Origin").val().length > 0 && $("#Destination").val().length > 0) {
            srcLat = "", srcLong = "", destLat = "", destLog = "";
            var geocoder = new google.maps.Geocoder();
            var OrgLocation = Origin.value
            geocoder.geocode({ 'address': OrgLocation }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    srcLat = results[0].geometry.location.lat()
                    srcLong = results[0].geometry.location.lng()
                } else {
                    alert("Something got wrong " + status);
                }
            });
            var geocoderdest = new google.maps.Geocoder();
            var OrgLocationDest = Destination.value
            geocoderdest.geocode({ 'address': OrgLocationDest }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    destLat = results[0].geometry.location.lat()
                    destLog = results[0].geometry.location.lng()
                    DisplayMap();

                } else {
                    alert("Something got wrong " + status);
                }
            });
        }
    }
    function DisplayMap() {

        if (srcLat != "" && srcLat != undefined) {

            $("#map-canvasForLoad").css("display", "block");
            $("#googleMapForLoad").css("display", "none");
            pointA = new google.maps.LatLng(srcLat, srcLong)
            pointB = new google.maps.LatLng(destLat, destLog)
            myOptions = {
                zoom: 450,
                center: pointA,

            },
            map = new google.maps.Map(document.getElementById('map-canvasForLoad'), myOptions),
           directionsService = new google.maps.DirectionsService,
           directionsDisplay = new google.maps.DirectionsRenderer({
               map: map
           }),

            markerA = new google.maps.Marker({
                position: pointA,
                map: map,
            }),
            markerB = new google.maps.MarkerImage({
                position: pointB,
                icon: image,
                map: map,
            });
            // get route from A to B
            calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
        }
        else {
            $("#map-canvasForLoad").css("display", "block");
            $("#googleMapForLoad").css("display", "none");
        }
    }
    function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {


        directionsService.route({
            origin: pointA,
            destination: pointB,
            travelMode: google.maps.TravelMode.WALKING

        }, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            } else {
                alert('No Routes Defined');
            }
        });
    }
    $(document).ready(function () {




        $("#btnmapSearch").click(function () {
            initMapLoad();
        });
    });
    function initAutocompleteLoad() {

        originSearch = new google.maps.places.Autocomplete(document.getElementById('Origin'), { types: ['geocode'] });
        originSearch.setFields('address_components');


        destinationSearch = new google.maps.places.Autocomplete(document.getElementById('Destination'), { types: ['geocode'] });
        destinationSearch.setFields('address_components');


    }

</script>


<div class="container">
    <div class="row">



        <div class="row">
            <div class="col-lg-12">
                <div class="col-lg-4">
                    <label for="Origin">Origin</label>@Html.TextBox("Origin", null, new { @class = "form-label", autocomplete = "Origin", @id = "Origin", })
                    <i class="glyphicon glyphicon-map-marker fa-2x" style="color:forestgreen;"></i>

                </div>
                <div class="col-lg-4">

                    <label for="Destination">Destination</label>@Html.TextBox("Destination", null, new { @class = "form-label", autocomplete = "off", @id = "Destination", placeholder = "Destination", style = "font-color:white;" })
                    <i class="glyphicon glyphicon-map-marker fa-2x" style="color:forestgreen;"></i>
                </div>








                <div class="col-lg-3">
                    <table><tr><td><input type="button" value="..." style="font-size: 2.2em;cursor:pointer;" id="btnmapSearch" class="btn-link" /></td></tr></table>

                </div>




            </div>
        </div>


        <div>
            <div id="googleMapForLoad" style="height:550px;width:650px;display:block;"></div>
            <div id="map-canvasForLoad" style="height:550px;width:650px;display:none;">
            </div>




        </div>


    </div>
</div>