如何使用javascript在 Map 中显示两个制造商之间的路线

我在创建具有多个纬度和经度的路线图时遇到了问题，我尝试了很多方法来创建路线图，但我只获得了标记位置，它不是 Map 上两个标记之间的显示路径 . 我需要在 Map 上的两个标记之间路由多个纬度和经度，我已经发布了下面的代码，我尝试过，

var MapPoints ='[{“address”：{“lat”：“23.7012517”，“lng”：“86.0591489”}，“title”：“Dalmia Cement，JHARKHAND”}，{“address”：{“lat”： “24.5246”，“lng”：“84.2845”}，“title”：“NAVIN CEMENT STORE”}，{“address”：{“lat”：“24.2493788”，“lng”：“83.9261005”}，“title” ：“SAKSHI TRADERS”}]';

var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
          var pointA = new google.maps.LatLng(23.7012517, 86.0591489);
        if (jQuery('#map').length > 0) {
            map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 15,
                center: pointA,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false 
              });

            directionsDisplay = new google.maps.DirectionsRenderer({
                map: map,
                suppressMarkers: true
              });
          var locations = jQuery.parseJSON(MapPoints);


          directionsDisplay.setMap(map);

          var infowindow = new google.maps.InfoWindow();
          var shippingCoordinates = [];
          var bounds = new google.maps.LatLngBounds();

          for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
              position: new google.maps.LatLng(locations[i].address.lat, locations[i].address.lng),
              map: map
            });
            shippingCoordinates.push(marker.getPosition());
            bounds.extend(marker.position);

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
              return function() {
                infowindow.setContent(locations[i]['title']);
                infowindow.open(map, marker);
              }
            })(marker, i));
          }

          map.fitBounds(bounds);

          // directions service configuration
          var start = shippingCoordinates[0];
          var end = shippingCoordinates[shippingCoordinates.length - 1];
          var waypts = [];
          for (var i = 1; i < shippingCoordinates.length - 1; i++) {
            waypts.push({
              location: shippingCoordinates[i],
              stopover: true
            });
          }
          finalRootMap(start, end, waypts);
        }
      }

      function finalRootMap(start, end, waypts) { 
        var request = {
          origin: start,
          destination: end,
          waypoints: waypts,
          optimizeWaypoints: true,
          travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.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>';
            }
          }
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);