2

I am using the Directions and Elevation Service of Google Maps, in order to extract the coordinates and the elevation along a route between a start and end point. I could set my directions service successfully, I could also extract the elevation values. Everything works fine at the first request, but if I send a second request I got the error message:

"InvalidValueError: in property path: fewer than 2 LatLngs".

screenshot of error message

I also noticed, that if I reload my page in Firefox, the error disappears. But if I don't reload my webpage, the error remains.

Below you can see my code:

$(window).on('load', function() {
 var directionsDisplay;
 directionsService = new google.maps.DirectionsService();
 var map;
});

$(window).on('load', function () {
 initMap();
});

 function initMap() {
  directionsDisplay = new google.maps.DirectionsRenderer();

  var mapOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(48.7758459, 9.1829321),
    mapTypeControl: false

}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
directionsDisplay.setMap(map);

}

//take start and end from input field
function calcRoute() {

var start = document.getElementById("start").value;
var end =  document.getElementById("end").value;

//send request to server
var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
};

path = [];

//get result from google maps server as response
directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);

        pointsArray = response.routes[0].overview_path;

        var i = 0;
        var j = 0;

        //get long lat of vertices along route
        for (j = 0; j < pointsArray.length; j++) {
            lat = pointsArray[j].lat();
            lng = pointsArray[j].lng();

            //save lat long in path array
            path.push(new google.maps.LatLng(lat, lng));

        //create marker
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map    
            }); 
        }   

    }
});

//Create an ElevationService
var elevator = new google.maps.ElevationService;
displayPathElevation(path, elevator, map);

function displayPathElevation(path, elevator, map) {

new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
});

elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
}, plotElevation);

}

function plotElevation(elevations, status) {
 if (status === 'OK') {
    for (var i=0; i < elevations.length; i++) {
        console.log(elevations[i].location.lat() );
        console.log(elevations[i].location.lng() );
        console.log(elevations[i].elevation);
     }
  }


};

Here are my libs and buttons:

<div id="wrapper">

    <label for="Start">Start</label><input id="start" type="textbox"></input><br/>
    <label for="End">End</label><input id="end" type="textbox"></input><br/><br/>
    <input id="submit" type="button" class="btn btn-dark" value="search" onclick="calcRoute();"><br/><br/>
    <div id="chart"></div>
 </div>
 <div id="map"></div>
 <script defer src="https://maps.googleapis.com/maps/api  /js?key=MY_API_KEY=initMap"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0

Try setting a timeout on the displayPathElevation function.

setTimeout(function() { displayPathElevation(path, elevator, map); }, 500);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.