Google direction time with traffic-CodePudding

I use google maps for my website, I want to get directions during traffic, how can I get estimated time during traffic in google maps directions?

I use the following code to get directions without traffic.

function direction(){
    var directionsService = new google.maps.DirectionsService();
    var directionsRenderer = new google.maps.DirectionsRenderer();


    var nmap = new google.maps.Map(document.getElementById('direction-map'), mapOptions);
    directionsRenderer.setMap(nmap);

    calcRoute();
}

function calcRoute() {

    var blng = parseFloat($("#beginning-lng").val());
    var blat = parseFloat($("#beginning-lat").val());

    var dlng = parseFloat($("#destination-lng").val());
    var dlat = parseFloat($("#destination-lat").val());

    var start = new google.maps.LatLng(blat, blng);
    var end = new google.maps.LatLng(dlat, dlng);
    var request = {
        origin: start,
        destination: end,
        travelMode: 'DRIVING',
        avoidTolls: true
    };
    directionsService.route(request,  function (result, status) {
        if (status == 'OK') {
            directionsRenderer.setDirections(result);
            console.log(result);
            var distance = result.routes[0].legs[0].distance.value / 1000;
            var time = result.routes[0].legs[0].duration.value / 60;
        }
    });
}

CodePudding user response：

To get directions during traffic, see the documentation for

code snippet:

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 41.85,
      lng: -87.65
    },
  });

  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById("sidebar"));
  calculateAndDisplayRoute(directionsService, directionsRenderer);

}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService
    .route({
      origin: 'Anaheim, CA',
      destination: 'Los Angeles, CA',
      travelMode: 'DRIVING',
      drivingOptions: {
        departureTime: new Date(Date.now()   10000), // for the time 10000 milliseconds from now.
        trafficModel: 'optimistic'
      }
    })
    .then((response) => {
      directionsRenderer.setDirections(response);
    })
    .catch((e) => window.alert("Directions request failed due to "   status));
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

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


/* Optional: Makes the sample page fill the window. */

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

#sidebar {
  flex-basis: 15rem;
  flex-grow: 1;
  padding: 1rem;
  max-width: 30rem;
  height: 100%;
  width: 50%;
  box-sizing: border-box;
  overflow: auto;
}

#sidebar {
  flex: 0 1 auto;
  padding: 0;
}

#sidebar>div {
  padding: 0.5rem;
}

<!DOCTYPE html>
<html>

<head>
  <title>Directions Service</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
  <div id="sidebar"></div>
  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly&channel=2" async></script>
</body>

</html>