How to use calcRoute()

Question

Anybody knows how to use calcRoute() function if there are multiple points in google map?

Currently, I have web application(asp.net) that can search city and store it in a listbox. At this point, I want to connect all the points that I have stored in listBox. Based on the tutorial in here, I have to use function calcRoute(). Therefore, in javascript . I intiliaze directionsDisplay.setMap(map);

 function initialize() {


        var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

        //route
        directionsDisplay = new google.maps.DirectionsRenderer();

        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: pyrmont,
            zoom: 15

        });

        //city autocomplete 
        var input = document.getElementById('tbCity');
        var options = {
            types: ['(cities)']
        };

        //create markerCity objects
        var defaultCityMarker = new google.maps.Marker({
            map: map
        });


        autocomplete = new google.maps.places.Autocomplete(input, options);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();
            if (!place.geometry) {
                return;
            }

            // If the place has a geometry, then present it on a map.
            if (place.geometry.viewport) {
                map.fitBounds(place.geometry.viewport);
            } else {
                map.setCenter(place.geometry.location);
                map.setZoom(15);
            }
            //defaultCityMarker.setIcon(yellowMarker);
            defaultCityMarker.setIcon(/** @type {google.maps.Icon} */({
                url: place.icon,
                size: new google.maps.Size(71, 71),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(17, 34),
                scaledSize: new google.maps.Size(35, 35)
            }));
            defaultCityMarker.setPosition(place.geometry.location);
            defaultCityMarker.setVisible(true);
        });

        placesList = document.getElementById('POIcontainer');

        // Create the search box and link it to the UI element.
        var POIinput = (document.getElementById('tbSearch'));
        var searchBox = new google.maps.places.SearchBox((POIinput));

        var searchButton = document.getElementById('btnSearch');
        google.maps.event.addDomListener(searchButton, 'click', function () {
            var poiKeyword = document.getElementById('tbSearch').value;
            getListOfPOI(poiKeyword);
        });


    } 

I have declared the calcRoute:

 function calcRoute() {

        var start = document.getElementById('start').value;
        var waypts = [];
        var end = document.getElementById('end').value;
        var waypoints = []; // init an empty waypoints array
        //check list from listbox(?)

        for (var i = 0; i < ListBox2.length; i++) {
            start.push({
                location: ListBox2[0].value,
                stopover: true
            });
            waypts.push({
                location: ListBox2[i].value,
                stopover: true
            });

            end.push({
                location: ListBox2[ListBox2.length-1].value,
                stopover: true
            });
        }

        var request = {
            origin: start,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var route = response.routes[0];
            }
        });
    }

In this function I took the points (which is the item of listBox2) and initialize the start,waypoint and end in for statement. Unfortunately, it seems it doesn;t work. Anybody knows how to use calcroute?Thanks

Answer 1

One problem is that DirectionRenderer for route is created

directionsDisplay = new google.maps.DirectionsRenderer();

but map is not specified on which directions will be rendered:

directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);

In createRoute() start and end points are created:

    var start = document.getElementById('start').value;
    var waypts = [];
    var end = document.getElementById('end').value;

and then used as array and filled up as waypoints in a loop:

    for (var i = 0; i < ListBox2.length; i++) {
        start.push({
            location: ListBox2[0].value,
            stopover: true
        });
        waypts.push({
            location: ListBox2[i].value,
            stopover: true
        });

        end.push({
            location: ListBox2[ListBox2.length-1].value,
            stopover: true
        });
    }

If ListBox2 has 10 elements, start and end will have 10 elements at the end. So, it is not clear what is the source for those two points.

See example at jsbin. start and end are hardcoded, waypoints are filled up from faked ListBox2 (0 and last index are skipped).