function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {
lat: 41.85,
lng: -87.65
}
});
directionsDisplay.setMap(map);
// New York, NY, USA (40.7127837, -74.0059413)
var start = new google.maps.LatLng(40.7127837, -74.0059413);
//Baltimore, MD, USA (39.2903848, -76.6121893)
var end = new google.maps.LatLng(39.2903848, -76.6121893);
calculateAndDisplayRoute(start, end, directionsService, directionsDisplay);
}
function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var totaldistance = 0;
var route = response.routes[0];
// display total distance information.
for (var i = 0; i < route.legs.length; i++) {
totaldistance = totaldistance + route.legs[i].distance.value;
}
document.getElementById('distance').innerHTML += "<p>total distance is " + (totaldistance / 1000).toFixed(2) + " km</p>";
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="distance"></div>
<div id="map"></div>