Changing SELECT to INPUT field

Question

I've got this code snippet for a route calculation with Google Maps.

<div id="map"></div>
<div id="right-panel">
    <div>
    <b>Standort:</b>
        <select id="start">
            <option value="Frankfurt">Frankfurt</option>
            <option value="Duisburg">Duisburg</option>
        </select>
        <br>
        <b>Punkt 1:</b> <br>
        <input id="wayp1">
        <br>
        <b>Punkt 2:</b>
        <input id="wayp2">
        <br>
        <select id="end">
            <option value="Frankfurt">Frankfurt</option>
            <option value="Duisburg">Duisburg</option>
        </select>
          <input type="submit" id="submit">
    </div>
    <div id="directions-panel"></div>
    </div>

</div><!-- #primary -->
<script>
  function initMap() {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: {lat: 50.81, lng: 6.83}
    });
    directionsDisplay.setMap(map);

    document.getElementById('submit').addEventListener('click', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay);
    });
  }

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
var waypts = [];
var checkboxArray = document.getElementById('waypoints');
for (var i = 0; i < checkboxArray.length; i++) {
  if (checkboxArray.options[i].selected) {
  waypts.push({
    location: checkboxArray[i].value,
    stopover: true
  });
 }
}

directionsService.route({
  origin: document.getElementById('start').value,
  destination: document.getElementById('end').value,
  waypoints: waypts,
  optimizeWaypoints: true,
  travelMode: 'DRIVING'
}, function(response, status) {
  if (status === 'OK') {
    directionsDisplay.setDirections(response);
    var route = response.routes[0];
    var summaryPanel = document.getElementById('directions-panel');
    summaryPanel.innerHTML = '';
    // For each route, display summary information.
    for (var i = 0; i < route.legs.length; i++) {
      var routeSegment = i + 1;
      summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
          '</b><br>';
      summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
      summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
      summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
    }
  } else {
    window.alert('Directions request failed due to ' + status);
  }
});
</script>

Waypoints get added by a select field. Now I want to change this into an input field.

So I created 2 input fields (wayp1 & wayp2) and replaced the waypts part with this:

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    var LadeValue = document.getElementById('wayp1').value;
    var AbLadeValue = document.getElementById('wayp2').value;
    var waypts = LadeValue + AbLadeValue;

But it doesn't work. Is there any answer to solve this problem?

Is it possible to get the complete distance in a sum? Right now the output gives me a distance per each route

(start->waypoint 1->waypoint 2->end).

Thanks in advance

I get a javascript error with the posted code `Uncaught TypeError: Cannot read property 'length' of null` — geocodezip, Jun 30 '17 at 10:13
related question: [Using Waypoints in Routes - Directions Service Google Maps](https://stackoverflow.com/questions/13130309/using-waypoints-in-routes-directions-service-google-maps) — geocodezip, Jun 30 '17 at 10:18

score 0 · Answer 1 · answered May 23 '17 at 07:08

The DirectionsRequest object waypoints property must be an array.

Read the documentation

var waypts = LadeValue + AbLadeValue;

What your above code does is just concatenating 2 strings into one. A very simple console.log(waypts) would have helped solving this issue.

If the latitude entered is 10 and the longitude is 20 then the above would log 1020.

var waypts = [LadeValue, AbLadeValue]; // This is an array

Changing SELECT to INPUT field

1 Answers1