Nerden Nereye Kaç Km Google Distance Api Kullanımı

Merhaba arkadaşlar google api ile otomatik input dodlurma ve seçiler bölgeler arası araçla kaç klometre mesafe ve kaç saate gidilebilir trafik durumuna bağlı olarak bu bilgileri bize veren bir hizmet google distance api nasıl kullanılır nasıl yapılır?

Google Distance Map Api Nasıl Kullanılır?

Google ile distance map api ufak bir uygulama yaptık ve bu uygulamanın nasıl yapıdığı api kodlarının nasıl alınacağı hakkında aşağıdaki videoda geniş bilgi bulabilirsiniz.

Youtube kanalımıza abone olarak bildirimleri açarak kaliteli içeriklerimizden tamamen ücretsiz faydalanabilirsin hadi ne bekliyorsun birden fazla api entegresyon videolarımızı izleyebilir kendini web tasarım alanında bir üst seviyeye taşıyabilirsin.

Google Distance Map Api

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
    crossorigin="anonymous" />

  <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</head>
<body>
 <div class="container"> 
  <div class="col md-6">
    <h5>Google map api - uygulaması</h5>
    <form id="distance_form">
      <div class="form-group"><label>Nerden: </label> <input class="form-control" id="from_places" autocomplete="of" placeholder="Şehir Hotel HavaAlanı" />
        <input id="origin" name="origin" required="" type="hidden" />
      </div>
      <div class="form-group"><label>Nereye: </label> <input class="form-control" id="to_places" placeholder="Şehir Hotel HavaAlanı" />
        <input id="destination" name="destination" required="" type="hidden" />
      </div>      
    </form>
    <div id="result">
      <ul class="list-group">
        <li class="list-group-item d-flex justify-content-between align-items-center" id="in_mile">Mil
          :</li>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="in_kilo">Kilometre</li>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="duration_text">IN TEXT:</li>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="duration_value">Saat</li>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="from">Nerden:</li>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="to">Nereye:</li>
          <br>
        <li class="list-group-item d-flex justify-content-between align-items-center" id="cost">Fiyat:</li>
      </ul>
    </div>
  </div>
</div>
  <script>
  $(function () {
      // add input listeners
      google.maps.event.addDomListener(window, "load", function () {
        var from_places = new google.maps.places.Autocomplete(
          document.getElementById("from_places")
        );
        var to_places = new google.maps.places.Autocomplete(
          document.getElementById("to_places")
        );
        google.maps.event.addListener(from_places, "place_changed", function () {
          var from_place = from_places.getPlace();
          var from_address = from_place.formatted_address;
          $("#origin").val(from_address);
          checkInputs();
        });
        google.maps.event.addListener(to_places, "place_changed", function () {
          var to_place = to_places.getPlace();
          var to_address = to_place.formatted_address;
          $("#destination").val(to_address);
          checkInputs();
        });
      });
      // calculate distance
      function calculateDistance() {
        var origin = $("#origin").val();
        var destination = $("#destination").val();
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
          {
            origins: [origin],
            destinations: [destination],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
            // unitSystem: google.maps.UnitSystem.metric, // kilometers and meters.
            avoidHighways: false,
            avoidTolls: false
          },
          callback
        );
      }
      // get distance results
      function callback(response, status) {
        if (status != google.maps.DistanceMatrixStatus.OK) {
          $("#result").html(err);
        } else {
          var origin = response.originAddresses[0];
          var destination = response.destinationAddresses[0];
          if (response.rows[0].elements[0].status === "ZERO_RESULTS") {
            $("#result").html(
              "Uçağa binsek iyi olur. Arasında yol yok" +
              origin +
              " and " +
              destination
            );
          } else {
            console.log(response);
            var distance = response.rows[0].elements[0].distance;
            var duration = response.rows[0].elements[0].duration;

            console.log(distance, duration);
            var distance_in_kilo = distance.value / 1000; // the kilom
            var distance_in_mile = distance.value / 1609.34; // the mile
            var duration_text = duration.text;
            var duration_value = duration.value;
            var price = distance_in_mile * 5 // cost = distance x £2 per mile
            $("#in_mile").text(distance_in_mile.toFixed(2));
            $("#in_kilo").text(distance_in_kilo.toFixed(2));
            $("#duration_text").text(duration_text);
            $("#duration_value").text(duration_value);
            $("#from").text(origin);
            $("#to").text(destination);
            $("#cost").text("TL" + price.toFixed(2));

          }
        }
      }
      // print results on submit the form
      function executeCalculation() {
        calculateDistance();
      }
      // Get all input fields.
      var inputs = document.querySelectorAll('.form-control');
      function checkInputs() {
        var allFilled = true;
        // If any of the inputs is not filled, we won't show the alert.
        for (var i = 0; i < inputs.length; i++) {
          if (inputs[i].value === '') {
            allFilled = false;
          }
        }
        // If all input fields have been filled.
        if (allFilled) {
          executeCalculation();
        }
      }
    });

  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=APİKEY&amp;libraries=places&amp;language=tr"></script>
</body>
</html>
yemek tarifleri | web tasarım