ByTriSLaSiS adlı üyeden alıntı: mesajı görüntüle
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>
api ücretlymiş sanırım benden kreid kartı istiyor.