How to determine which label on Gmaps is closer?

Question

JavaScript

When the map is initialized, a label is placed with my location, and let's say 6 more labels in different places.
How to write in such a way that it itself determines which label is closer and the function of constructing the shortest path works.

javascript

$(document).ready(function(){
    function myplace()
    {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                geocoding(position.coords.latitude, position.coords.longitude);
            });
        } else
        {
            alert("Geolocation API не поддерживается в вашем браузере");
        }
    }

    function geocoding(lat, lon)
    {
        var my_adress;
        var api_key = 'AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g';
        var cordinats = [lat,  lon];
        var loctype = 'ROOFTOP';
        var restype = 'street_address';
        var position = cordinats.join(",");
        var data = {latlng: position, location_type: loctype, result_type: restype, key: api_key};
        $.ajax({
            method: "GET",
            url: "https://maps.googleapis.com/maps/api/geocode/json",
            data: data,
            dataType: 'json',
            success: function (result) {
                console.log(result)
                my_adress = result.results[0].formatted_address;
                alert("Вы здесь" + " " + "<" + " " + my_adress + " " + ">");
                /-----------------------GMaps Initialization-------------------------------/
                function initMap() {
                    var latlng = new google.maps.LatLng(lat, lon);
                    var mapOptions = {

                        center: latlng,
                        zoom: 14,
                        mapTypeControl: false,
                        streetViewControl: false,
                        styles: [{"featureType":"water","stylers":[{"saturation":43},{"lightness":-11},{"hue":"#0088ff"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"hue":"#ff0000"},{"saturation":-100},{"lightness":99}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#808080"},{"lightness":54}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"color":"#ece2d9"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#ccdca1"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#767676"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#b8cb93"}]},{"featureType":"poi.park","stylers":[{"visibility":"on"}]},{"featureType":"poi.sports_complex","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","stylers":[{"visibility":"simplified"}]}]
                    };

                    map = new google.maps.Map(document.getElementById('map'), mapOptions);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        map: map,
                        title:"Вы знаходитесь в данном месте"
                    });
                }



                
                function drivingRoute(from, to) {
                    var request = {
                        origin: from,
                        destination: to,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING,
                        unitSystem: google.maps.UnitSystem.METRIC
                    };
                    $('#controls p').removeClass('error');
                    $('#controls p').text('loading');
                    if(typeof(drivingLine) !== 'undefined') drivingLine.setMap(null);
                    directionsService.route(request, function(response, status){
                        if(status == google.maps.DirectionsStatus.OK){

                            var totalKM = (response.routes[0].legs[0].distance.value / 1000);
                            var miles = Math.round(totalKM * 1 * 10) / 10;
                            var distanceText = miles+' КМ';
                            $('#controls p').text(distanceText);

                            drivingLine = new google.maps.Polyline({
                                path: response.routes[0].overview_path,
                                strokeColor: "#b00",
                                strokeOpacity: .75,
                                strokeWeight: 5
                            });
                            drivingLine.setMap(map);
                            map.fitBounds(response.routes[0].bounds);

                        }

                        else {
                            $('#controls p').addClass('error');
                            $('#controls p').text('cannot load route');
                        }

                    });

                }

                $('input').blur(function(){
                    drivingRoute(
                        $('input[name=from]').val(),
                        $('input[name=to]').val()
                    );
                });

                var map;
                var drivingLine;
                var directionsService = new google.maps.DirectionsService();
                initMap();
                $('input[name=from]').val(my_adress);
                $('input[name=to]').val('');
                $('input[name=from]').trigger('blur');
            },
            error: function (err) {
                console.log("Ошибка сервера")
            }
        })
    }
    myplace();
    markermap();




  
});

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Route Aplication</title>
   <link media="screen" href="demo/styles/demo.css" type="text/css" rel="stylesheet" />
   <link rel="shortcut icon" href="http://www.rudebox.org.ua/wp-content/themes/mystique/favicon.ico" />
    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>


<br><br>
  <div id="controls">
  <label><span><b>От куда:</b></span>  <input type="text" name="from"></label>
  <label><span><b>Куда:</b></span> <input type="text" name="to"></label>
  <p></p>
</div>


<div id="map"></div>

  <script src="js/jquery-3.2.1.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsuS1MqzRBzRv1HRrfrlyoMRlkrVXEx0g&callback=initMap"></script>
  <script src="js/maps.js"></script>
  <script src="js/index.js"></script>


  <script src="js/jquery-3.2.1.min.js"></script>

</body>

</html>

css

html,
body {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 12pt;
  color: #000;
  overflow:  hidden;
}
#map {
  margin-left: 420px;
  width: 700px;
  height: 490px;
}
#controls {
  position: absolute;
  top: 4.1em;
  right: 1.5em;
  z-index: 10;
  background: #fff;
  padding: 1em 2em;
  opacity: .8;
  border-top: solid .4em #444;
  border-bottom: solid .4em #444;
}
#controls label {
  display: block;
  margin: 1em 0;
}
#controls label span {
  display: inline-block;
  min-width: 3.5em;
}
#controls label input {
  font-family: 'Montserrat';
  font-size: 12pt;
  padding-bottom: .2em;
  width: 10em;
  border: none;
  border-bottom: solid 1px #999;
  color: #000;
  outline: none;
  webkit-appearance: none;
}
#controls p {
  text-align: right;
  font-size: 80%;
  margin: 1em 0 .5em 0;
}
#controls p.error {
  color: #b00;
}

Answer 1

Get the coordinates of the labels and calculate with which label the difference in coordinates is less and build to it)
lat+lng (labels) - lat+lng (your place)
push into the array
select the smallest modulo value from the array
draw a route
like it should work)
ps api direction seems to have a built-in method

Answer 2

If you are the shortest on the road, then you need to use the Distance Matrix