简体   繁体   中英

Directions Service of Google Maps API doesn't work

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>

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!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM