Google map not working properly

Question

I wanna build distance calculator from 2 points using google maps.But the output is not working.I not getting the distance and the duration of those 2 points This is my javascript code.

var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
  new google.maps.places.SearchBox(document.getElementById('autocomplete'));
  new google.maps.places.SearchBox(document.getElementById('autocomplete1'));
  directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});

function GetRoute() {
  var mumbai = new google.maps.LatLng(18.9750, 72.8258);
  var mapOptions = {
    zoom: 7,
    center: mumbai
  };
  map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('dvPanel'));

  //*********DIRECTIONS AND ROUTE**********************//
  source = document.getElementById("autocomplete").value;
  destination = document.getElementById("autocomplete1").value;

  var request = {
    origin: source,
    destination: destination,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });

  //*********DISTANCE AND DURATION**********************//
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [source],
    destinations: [destination],
    travelMode: google.maps.TravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function (response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
      var distance = response.rows[0].elements[0].distance.text;
      var duration = response.rows[0].elements[0].duration.text;
      var dvDistance = document.getElementById("dvDistance");
      dvDistance.innerHTML = "";
      dvDistance.innerHTML += "Distance: " + distance + "<br />";
      dvDistance.innerHTML += "Duration:" + duration;

    } else {
      alert("Unable to find the distance via road.");
    }
  });
} 

This my html code

<div id="fifth">
  <div class="row">
    <p><b>Step 5:Locations Details</b></p>
  </div>
  <div class="row">
    <div class="col-md-3">
      <input type="text" class="form-control" id="autocomplete"  placeholder="Pick-up Location">
    </div>  
    <div class="col-md-3">
      <input type="text" class="form-control" id="autocomplete1"  placeholder="Drop-off Location">
    </div> 
    <div class="col-md-3">
      <input type="button" class="form-control" value="Get Distance" onclick="GetRoute()">
    </div>  
  </div>
  <div class="row">
    <table>
      <tr>
        <td colspan="2">
          <div id="dvDistance"></div>
        </td>
      </tr>
      <tr>
        <td>
          <div id="dvMap" style="width: 500px; height: 500px"></div>
        </td>
        <td>
          <div id="dvPanel" style="width: 500px; height: 500px"></div>
        </td>
      </tr>
    </table>
  </div>
</div>

I'm new at programming.Can someone help me? Sry for my bad english

Answer 1

Have you specified "libraries=places"?

src="https://maps.googleapis.com/maps/api/js?key=123456&callback=initMap&libraries=places"