Distance Matrix Service

by Semih Muyaoğlu

HTML

<div id="output"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select,
#right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}

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

#map {
  height: 100%;
  width: 50%;
}

#right-panel {
  float: right;
  width: 48%;
  padding-left: 2%;
}

#output {
  font-size: 11px;
}

JavaScript

function initMap() {


  var geocoder = new google.maps.Geocoder;

  var service = new google.maps.DistanceMatrixService;

  service.getDistanceMatrix({
    origins: [{ lat: 38.439675,lng: 27.249766 }],
    destinations: [{ lat: 38.462490, lng: 27.193584 }],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== 'OK') {
      alert('Error was: ' + status);
    } else {
    


console.log(response.rows[0].elements[0].distance.text)
console.log(response.rows[0].elements[0].duration.text)

   
    }
  });
}