Aşağıdaki kodu test ettim çalışıyor tek yapman gerken api keyeklemek
benim işyerinden dünyanın merkezi çorum 680 KM miş
alert olarak uyarı verdirdim
gerekli değişikleri yaparsın hocam.

kodu şuradan aldım : https://developers.google.com/maps/d...s-travel-modes
benim tek yaptığım alert verip km cinsinden hesaplama yaptırmak oldu bilgin olsun.
daha büyük projelerde yer almıştım google map ile ilgili.
bir sorun olursa yazman yeterli.




<html>
  <head>
    <title>Travel Modes in Directions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <style>

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}
    </style>
  </head>
  <body>
    <div id="floating-panel">
      <b>Mode of Travel: </b>
      <select id="mode">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>
    </div>
    <div id="distance-panel">Mesafe: <span id="distance"></span></div>

    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=[APIkey]&callback=initMap&v=weekly"
      defer
    ></script>
    
    <script>
    function initMap() {
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const directionsService = new google.maps.DirectionsService();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 14,
    center: { lat: 37.77, lng: -122.447 },
  });

  directionsRenderer.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsRenderer);
  document.getElementById("mode").addEventListener("change", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const selectedMode = document.getElementById("mode").value;

  directionsService
    .route({
      origin: { lat: 41.15733506057749, lng:  28.622438170769346 },
    
      destination: { lat:40.54824193205548, lng:34.9595815908121 },
      travelMode: google.maps.TravelMode[selectedMode],
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      // Yolun uzunluğunu al
      const distance = response.routes[0].legs[0].distance.text;

      // Mesafeyi bir uyarı penceresi ile göster
      alert("Mesafe: " + distance);
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}


window.initMap = initMap;
    </script>
  </body>
</html>