CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
TheOrdinaryGeek
TheOrdinaryGeek

Reputation: 2323

Google Maps API v3 Display Travel Time

Using Google Maps API v3, is it possible to get the travel time to display when the map is opened initially?

There's an example at this link of switching between travel modes. I know how to set an addEventListener to listen for an input change and then display the travel time, but I want to display the driving time when the map is first opened / loaded.

I am opening the map in a modal window.

The following JQuery works when I change inputs, but not initial open. It works on the second open.

$('#travelTime').html('Est. travel time: ' +travelTime);

The code below works, although it doesn't contain a modal.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel Modes in Directions</title>
    <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>
    <p id="travelTime"></p> <!-- display time here -->
    <div id="map"></div>
    <script>
      function initMap() {
        var directionsDisplay = new google.maps.DirectionsRenderer;
        var directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 37.77, lng: -122.447}
        });
        directionsDisplay.setMap(map);

        calculateAndDisplayRoute(directionsService, directionsDisplay);
        document.getElementById('mode').addEventListener('change', function() {
          calculateAndDisplayRoute(directionsService, directionsDisplay);
        });
      }

      function calculateAndDisplayRoute(directionsService, directionsDisplay) {
        var selectedMode = document.getElementById('mode').value;
        directionsService.route({
          origin: {lat: 37.77, lng: -122.447},  
          destination: {lat: 37.768, lng: -122.511},  
          travelMode: google.maps.TravelMode[selectedMode]
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
            travelTime = response.routes[0].legs[0].distance.text; // contains correct value 
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Upvotes: 0

Views: 1040

Answers (1)

jonboy
jonboy

Reputation: 2749

Initialise the map before opening the modal.

Add initMap() on page load.

Upvotes: 1

Related Questions