Vjylku

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

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>

Try setting a timeout on the displayPathElevation function.

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