Hfrhyu

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