карта Google не работает должным образом

Question

Я хочу построить расстояние калькулятор с 2 точек с помощью Google maps.But выход не working.I не получает расстояние и продолжительность этих 2 пунктов Это мой код Javascript ,

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."); 
    } 
    }); 
} 

Это мой HTML-код

<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> 

Я новичок в programming.Can кто-то мне помочь? Sry для моего плохого английского

Answer 1

Вы указали «библиотеки = места»?

SRC = "https://maps.googleapis.com/maps/api/js?key=123456 & обратного вызова = initMap & библиотеки = места"