具有多个停靠点/航点的 Google Maps Route API

Question

I'm trying to draw route between source and destination with multiple stops using Google Maps API. I'll pass lat and log values for source, destination and all the stops.I've tried using the basic snippet but theat code (below) a route is drawn between each stops.

[![<script type="text/javascript">
    var markers = [
            {
                "timestamp": 'Alibaug',
                "latitude": '18.641400',
                "longitude": '72.872200',
                "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.'
            },
            {
                "timestamp": 'Mumbai',
                "latitude": '18.964700',
                "longitude": '72.825800',
                "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.'
            }
        ,
            {
                "timestamp": 'Pune',
                "latitude": '18.523600',
                "longitude": '73.847800',
                "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.'
            }
    \];
    window.onload = function () {
        var mapOptions = {
            center: new google.maps.LatLng(markers\[0\].latitude, markers\[0\].longitude),
            zoom: 10,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        var infoWindow = new google.maps.InfoWindow();
        var lat_lng = new Array();
        var latlngbounds = new google.maps.LatLngBounds();
        for (i = 0; i < markers.length; i++) {
            var data = markers\[i\]
            var myLatlng = new google.maps.LatLng(data.latitude, data.longitude);
            lat_lng.push(myLatlng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.timestamp
            });
            // console.log(i)

            latlngbounds.extend(marker.position);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent(data.timestamp);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
        map.setCenter(latlngbounds.getCenter());
        map.fitBounds(latlngbounds);

        //***********ROUTING****************//

        //Initialize the Path Array
        var path = new google.maps.MVCArray();

        //Initialize the Direction Service
        var service = new google.maps.DirectionsService();

        //Set the Path Stroke Color
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' });


        //Loop and Draw Path Route between the Points on MAP
        for (var i = 0; i < lat_lng.length; i++) {
            if ((i + 1) < lat_lng.length) {
                var src = lat_lng\[i\];
                var des = lat_lng\[i + 1\];
                path.push(src);
                poly.setPath(path);
                service.route({
                    origin: src,
                    destination: des,
                    travelMode: google.maps.DirectionsTravelMode.WALKING
                }, function (result, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        for (var i = 0, len = result.routes\[0\].overview_path.length; i < len; i++) {
                            path.push(result.routes\[0\].overview_path\[i\]);
                        }
                    }
                });
            }
        }
    }
</script>][1]][1]

In the above image, there is an extra route drawn.

fiddle demonstrating issue with more points

Answer 1

You have a typo/bug in your code. Remove this line:

path.push(src);

from this loop:

    //Loop and Draw Path Route between the Points on MAP
    for (var i = 0; i < lat_lng.length; i++) {
        if ((i + 1) < lat_lng.length) {
            var src = lat_lng[i];
            var des = lat_lng[i + 1];
            // path.push(src); <============================================ here
            poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.WALKING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }

a second problem comes from the asynchronous nature of the directions service. The order of the responses from the service is not guaranteed to be in the same order as the requests are sent. The simplest way to fix that is to create a separate polyline for each result:

 function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      //Initialize the Path Array
      var path = new google.maps.MVCArray();
      //Set the Path Stroke Color
      var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#4986E7'
      });
      poly.setPath(path);
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
        path.push(result.routes[0].overview_path[i]);
      }
    }
  });

proof of concept fiddle

code snippet:

 var markers = [{ "timestamp": 'Alibaug', "latitude": '18.641400', "longitude": '72.872200', "description": 'Alibaug is a coastal town and a municipal council in Raigad District in the Konkan region of Maharashtra, India.' }, { "timestamp": 'Mumbai', "latitude": '18.964700', "longitude": '72.825800', "description": 'Mumbai formerly Bombay, is the capital city of the Indian state of Maharashtra.' }, { "timestamp": 'Pune', "latitude": '18.523600', "longitude": '73.847800', "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' }, { "timestamp": 'Bhopal', "latitude": '23.2599', "longitude": '73.857800', "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' }, { "timestamp": 'Bhopal', "latitude": '26.9124', "longitude": '75.7873', "description": 'Pune is the seventh largest metropolis in India, the second largest in the state of Maharashtra after Mumbai.' } ]; window.onload = function() { var mapOptions = { center: new google.maps.LatLng(markers[0].latitude, markers[0].longitude), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions); var infoWindow = new google.maps.InfoWindow(); var lat_lng = new Array(); var latlngbounds = new google.maps.LatLngBounds(); for (i = 0; i < markers.length; i++) { var data = markers[i] var myLatlng = new google.maps.LatLng(data.latitude, data.longitude); lat_lng.push(myLatlng); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: data.timestamp }); // console.log(i) latlngbounds.extend(marker.position); (function(marker, data) { google.maps.event.addListener(marker, "click", function(e) { infoWindow.setContent(data.timestamp); infoWindow.open(map, marker); }); })(marker, data); } map.setCenter(latlngbounds.getCenter()); map.fitBounds(latlngbounds); //***********ROUTING****************// //Initialize the Direction Service var service = new google.maps.DirectionsService(); //Loop and Draw Path Route between the Points on MAP for (var i = 0; i < lat_lng.length; i++) { if ((i + 1) < lat_lng.length) { var src = lat_lng[i]; var des = lat_lng[i + 1]; // path.push(src); service.route({ origin: src, destination: des, travelMode: google.maps.DirectionsTravelMode.WALKING }, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { //Initialize the Path Array var path = new google.maps.MVCArray(); //Set the Path Stroke Color var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7' }); poly.setPath(path); for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { path.push(result.routes[0].overview_path[i]); } } }); } } }

 /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #dvMap { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }

 <div id="dvMap"></div> <!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>