Javascript array object need to remove element

Question

Google map directionsService.route need add remove waypoint using javascript.

It is possible to add new point to array using code:

waypts.push({ location: "Rome, Italy", stopover: true });

Problem when remove waypoint from array

Here my some data example that can explain more brief;

Need to remove point 1 or point 2 from above javascript object array how do it possible.

Then I will create new waypts for each time route draw from above array named nwaypts.

var nwaypts = [
{ location: "Rome, Italy", stopover: true }, // xyz: start point 
{ location:  { lat: 42.2070007, lng: 12.48549939999998 }, stopover: true, id: "17167" }, // point 1
{ location: { lat: 42.3793831, lng: 12.82857039999999 }, stopover: true, id: "18823" }, // point 2
{ location: "Terni, Italy", stopover: true } // xyz: end point 
];

Answer 1

Hello In remove waypoints you can add id to marker and then during removecode u can try to compare with marker id (which u want to remove). Please provide full code to get the exact solution.

var nwaypts=[];
                        var j=0;
                        for ( var i = 0; i < waypts.length ; i++) {
                            if(waypts[i].id!=removemarkerid){
                                nwaypts[j]=waypts[i];
                                j++;
                            }
                        }
                        waypts=nwaypts; 

Answer 2

The were few problems with you code. Working example is at https://jsfiddle.net/z1dvs5wp/

Explanation in code:

<script>

  // set variables outside initMap() function to make them visible for other functions
  var waypts = [];
  var directionsService;
  var directionsDisplay;
  var map;

  // add waypoints 
  waypts.push({
        location: "winnipeg, mb",
        stopover: true
      });
  waypts.push({
        location: "spokane, wa",
        stopover: true
      });    

  function initMap() {
    // map setup
    directionsService = new google.maps.DirectionsService;
    directionsDisplay = new google.maps.DirectionsRenderer;
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: {lat: 41.85, lng: -87.65}
    });
    directionsDisplay.setMap(map);

    // calculate route
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  }

  function calculateAndDisplayRoute(directionsService, directionsDisplay) {
    directionsService.route({
      origin:"Boston, MA",//document.getElementById('start').value,
      destination: "San Francisco, CA",//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);
      }
    });
  }

 function removewaypoint(idx=0) {
  // this function takes index of location to remove
  // point A is start
  // point B has index 0
  // point C has index 1... 
  // removewaypoint(1) - will remove point C

  waypts.splice(idx, 1);

  // recalculate route with new waypoints
  calculateAndDisplayRoute(directionsService, directionsDisplay);
 }
</script>