How to add new markers and calculate the new route

Damian Ricobelli :

I have a map with a route that contains a series of waypoints. I would like to be able to add new markers by clicking on the map, and to automatically calculate the route with the previous and new markers, taking into account the settings of optimizeWaypoints: true.

I've tried but I don't understand how to do it.

Anyone know how to do this?

     function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: -32.949798, lng: -60.681911}
        });

        var directionsService = new google.maps.DirectionsService;
        var directionsRenderer = new google.maps.DirectionsRenderer({
          draggable: true,
          map: map,
          panel: document.getElementById('right-panel')
        });

        directionsRenderer.addListener('directions_changed', function() {
          computeTotalDistance(directionsRenderer.getDirections());
        });
       
       google.maps.event.addListener(map, 'click', function(event) {
           placeMarker(event.latLng);
       });

        function placeMarker(location) {
            var marker = new google.maps.Marker({
                position: location, 
                map: map
            });
        }

        displayRoute(new google.maps.LatLng(-32.949798, -60.681911), new google.maps.LatLng(-32.949798, -60.681911), directionsService,
            directionsRenderer);
      }

      function displayRoute(origin, destination, service, display) {
        service.route({
          origin: origin,
          destination: destination,
          waypoints: [{location: new google.maps.LatLng(-32.930572, -60.662137)},
                      {location: new google.maps.LatLng(-32.923554, -60.665930)},
                      {location: new google.maps.LatLng(-32.936270, -60.652841
)},],
          optimizeWaypoints: true,
          travelMode: 'DRIVING',
          avoidTolls: true,
          avoidHighways: true
        }, function(response, status) {
          if (status === 'OK') {
            display.setDirections(response);
          } else {
            alert('Could not display directions due to: ' + status);
          }
        });
      }

      function computeTotalDistance(result) {
        var totalDistance = 0;
        var totalDuration = 0;
        var minutes = 0;
        var hours = 0;
        var myroute = result.routes[0];
        for (var i = 0; i < myroute.legs.length; i++) {
          totalDistance += myroute.legs[i].distance.value;
          totalDuration += myroute.legs[i].duration.value;
        }
        totalDistance = totalDistance / 1000;

        var hours = Math.floor( totalDuration / 3600 );  
        var minutes = Math.floor( (totalDuration % 3600) / 60 );
        var seconds = totalDuration % 60;
 
        hours = hours < 10 ? '0' + hours : hours; 
        minutes = minutes < 10 ? '0' + minutes : minutes; 
        seconds = seconds < 10 ? '0' + seconds : seconds;
        if(hours == 0) {
          var result = minutes + " min";
        } else {
          var result = hours + ':' + minutes + " hs";
        }
        
        document.getElementById('total_distance').innerHTML = totalDistance.toFixed(2) + ' km ';
        document.getElementById('total_duration').innerHTML = result;
      }

      #right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 63%;
        height: 100%;
      }
      #right-panel {
        float: right;
        width: 34%;
        height: 100%;
      }
      .panel {
        height: 100%;
        overflow: auto;
      }

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Direcciones</title>
        <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMZqunCMWco2noEHk5BlWyJExOPn1XCRU&callback=initMap"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="right-panel">
      <p>Distance: <span id="total_distance"></span></p>
      <p>Duration: <span id="total_duration"></span></p>
    </div>
  </body>
</html>

geocodezip :

When you click on the map, add the location of the click to an array of "added waypoints".

var addedWaypoints = [];

function addWaypoint(latLng) {
  addedWaypoints.push(latLng);
}

Call the directions service again, adding the new waypoints in to the request.

google.maps.event.addListener(map, 'click', function(event) {
  addWaypoint(event.latLng);
  displayRoute(start, end, directionsService, directionsRenderer);
});

function displayRoute(origin, destination, service, display) {
  var waypoints = [
    {location: new google.maps.LatLng(-32.930572, -60.662137)},
    {location: new google.maps.LatLng(-32.923554, -60.665930)},
    {location: new google.maps.LatLng(-32.936270, -60.652841)}
  ];
  for (var i=0; i<addedWaypoints.length;i++) {
    waypoints.push({
      location: addedWaypoints[i]
    });
  }
  service.route({
    origin: origin,
    destination: destination,
    waypoints: waypoints,
    optimizeWaypoints: true,
    travelMode: 'DRIVING',
    avoidTolls: true,
    avoidHighways: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

proof of concept fiddle

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -32.949798,
      lng: -60.681911
    }
  });

  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsRenderer.addListener('directions_changed', function() {
    computeTotalDistance(directionsRenderer.getDirections());
  });
  var start = new google.maps.LatLng(-32.949798, -60.681911);
  var end = new google.maps.LatLng(-32.949798, -60.681911);

  google.maps.event.addListener(map, 'click', function(event) {
    // placeMarker(event.latLng);
    addWaypoint(event.latLng);
    displayRoute(start, end, directionsService, directionsRenderer);
  });

  function placeMarker(location) {
    var marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }

  displayRoute(start, end, directionsService, directionsRenderer);
}

function displayRoute(origin, destination, service, display) {
  var waypoints = [{
      location: new google.maps.LatLng(-32.930572, -60.662137)
    },
    {
      location: new google.maps.LatLng(-32.923554, -60.665930)
    },
    {
      location: new google.maps.LatLng(-32.936270, -60.652841)
    },
  ];
  for (var i=0; i<addedWaypoints.length;i++) {
    waypoints.push({
      location: addedWaypoints[i]
    });
  }
  var wayptsStr = "";
  for (var i=0; i<waypoints.length; i++) {
     wayptsStr += waypoints[i].location.toUrlValue(6)+",";
  }
  console.log("displayRoute: origin="+origin.toUrlValue(6)+" dest="+destination.toUrlValue(6)+" waypoints="+wayptsStr);
  service.route({
    origin: origin,
    destination: destination,
    waypoints: waypoints,
    optimizeWaypoints: true,
    travelMode: 'DRIVING',
    avoidTolls: true,
    avoidHighways: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}
var addedWaypoints = [];

function addWaypoint(latLng) {
  addedWaypoints.push(latLng);
}

function computeTotalDistance(result) {
  var totalDistance = 0;
  var totalDuration = 0;
  var minutes = 0;
  var hours = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    totalDistance += myroute.legs[i].distance.value;
    totalDuration += myroute.legs[i].duration.value;
  }
  totalDistance = totalDistance / 1000;

  var hours = Math.floor(totalDuration / 3600);
  var minutes = Math.floor((totalDuration % 3600) / 60);
  var seconds = totalDuration % 60;

  hours = hours < 10 ? '0' + hours : hours;
  minutes = minutes < 10 ? '0' + minutes : minutes;
  seconds = seconds < 10 ? '0' + seconds : seconds;
  if (hours == 0) {
    var result = minutes + " min";
  } else {
    var result = hours + ':' + minutes + " hs";
  }

  document.getElementById('total_distance').innerHTML = totalDistance.toFixed(2) + ' km ';
  document.getElementById('total_duration').innerHTML = result;
}

#right-panel {
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }

      #right-panel select, #right-panel input {
        font-size: 15px;
      }

      #right-panel select {
        width: 100%;
      }

      #right-panel i {
        font-size: 12px;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
        float: left;
        width: 63%;
        height: 100%;
      }
      #right-panel {
        float: right;
        width: 34%;
        height: 100%;
      }
      .panel {
        height: 100%;
        overflow: auto;
      }

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMZqunCMWco2noEHk5BlWyJExOPn1XCRU&callback=initMap"></script>
<div id="map"></div>
<div id="right-panel">
  <p>Distance: <span id="total_distance"></span></p>
  <p>Duration: <span id="total_duration"></span></p>
</div>

How to add new markers and calculate the new route

Guess you like