Google Maps API的路线服务不起作用

Question

Do you have any idea why my directions service of Google Maps API doesn't work? It seems that method directionsService.route() isn't executed (cause alert with status is not displayed), but I don't know why. I'm newbie in Google Maps API and JS, so try to be forgiving, if it's something simple. :)

var map = null;
var pos = null;
const STORED_LOC = new google.maps.LatLng(50.405196, 11.894855);
var currentLat = document.getElementById("latLabel");
var currentLng = document.getElementById("lngLabel");
var additionalInfo = document.getElementById("additionalInfo");

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize()
{
    pos = STORED_LOC;
    currentLat.innerHTML = pos.lat();
    currentLng.innerHTML = pos.lng();

    options =
        {
            center: pos,
            zoom: 15
        }

    marker = new google.maps.Marker(
        {
            position: pos,
            map: map,
            title: "Chosen localization"
        }
    );

    map = new google.maps.Map(document.getElementById("mapContainer"), options);
    marker.setMap(map);

    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
}

$("#yes").click(function () {
    getPosition();
    hideUserConsentSection();
});

$("#no").click(function () {
    hideUserConsentSection();
    showSetCustomLocationSection();
});

function showSetCustomLocationSection() {
    $("#setCustomLocationSection").show();
}

function hideUserConsentSection() {
    $("#userConsentSection").hide();
}

function getPosition() {

    if (navigator.geolocation) {
        var options = {
            enableHighAccuracy: true,
            timeout: 20000,
            maximumAge: 2000
        }

        navigator.geolocation.getCurrentPosition(showPosition, errorPosition, options);
    }

    else
    {
        additionalInfo.innerHTML += "Your browser doesn't support geolocation";
    }
}

function showPosition(position) {

    pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    currentLat.innerHTML = pos.lat();
    currentLng.innerHTML = pos.lng();

    var request =
        {
            origin: STORED_LOC,
            destination: pos,
            travelmode: google.maps.TravelMode.DRIVING
        }
    directionsService.route(request, function(result, status)
    {
        alert(status);
        if (status == google.maps.DirectionsStatus.OK)
        {
            alert("OKAY");
            directionsDisplay.setDirections(result);
        }
    });
    //map = new google.maps.Map(document.getElementById("mapContainer"), options);
    //marker.setMap(map);

}

function errorPosition(position) {
    switch (position.code) {
        case 1:
            showSetCustomLocationSection();
            break;
        case 2:
            showSetCustomLocationSection();
            break;
        case 3:
            showSetCustomLocationSection();
            break;
        default:
            break;
    }
}

google.maps.event.addDomListener(window, 'load', initialize);

My HTML looks like that:

<h3>How to reach us?</h3>

<div id="userConsentSection">Can we use your geolocation?<br />
     <input type="button" id="yes" value="Yes" />
    <input type="button" id="no" value="No" /><br /><br />
</div>

<div id="setCustomLocationSection" style="display:none">
    Enter your geolocation. <br /><br />
    <input type="text" id="customLocation" />
    <input type="button" id="setCustomLocationButton" value="Show" /><br /><br />
</div>

<span>Latitude: </span>
<div id="latLabel">
</div>

<span>Longitude: </span>
<div id="lngLabel">
</div>

<div id="additionalInfo">
</div>

<div id="mapContainer" style="height: 400px; width: 100%">

</div>

<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=XXXX&sensor=true">
</script>

Answer 1

The answer is typo in request object - travelmode instead travelMode. This parameter is required and as the result - route method doesn't execute. Be careful with that name!