javascriptjquerygoogle-mapsgoogle-maps-api-3fitbounds

Fit Bounds in Google Map Render Directions


I am trying to render directions for 48 waypoints, but google only allows 8 waypoints to be rendered per request. so I do multiple requests (in my case 6). However, the API somehow doed fitBounds() for the last request.

How can I show all the 48 waypoints in one map using fitBounds() and/or setZoom()

My code is as below: -

function DisplayDirection(directionList){

    var interval = 8; // upper bound for usage limits in google directions API is 8
    var startIndex =0;
    var maxmimumIndex = directionList.length-1; // Total number of waypoints in this route
    var partialEndIndex = interval-1; // end waypoint at start
    var iteration = 0; // loop controler
    directionsService = new google.maps.DirectionsService();
    var resultSet = new Array();
    var directionsDisplayList = new Array();
    var resultsCached = 0;
    var bounds = new google.maps.LatLngBounds();

    do { //do...while to iterate over multiple requests
        iteration++;
        if(iteration>1){
            startIndex = startIndex+interval;
            partialEndIndex = startIndex+interval;
        }

        var directionsDisplay = new google.maps.DirectionsRenderer({
                markerOptions: {
                    visible:false
                }      
            });
        directionsDisplayList.push(
            directionsDisplay
        ); 

        directionsDisplayList[iteration-1].setMap(map);

        var origin = directionList[startIndex];
        var destination = partialEndIndex < maxmimumIndex ? directionList[partialEndIndex]:directionList[maxmimumIndex];
        waypoints = new Array();

        for(var i=startIndex+1;i<partialEndIndex;i++){
            if(i>maxmimumIndex){                
                break;
            }       

            waypoints.push(
                {
                    location:directionList[i],
                    stopover:true
                }
            );
            latlong = directionList[i].split(","); //
            lat = latlong[0];  //
            lng = latlong[1]; //
            bounds.extend (new google.maps.LatLng(lat,lng)); //extend the bounds            
        }

        var request = {
            origin: origin,
            destination: destination,
            waypoints : waypoints,
            provideRouteAlternatives:false,
            travelMode: google.maps.TravelMode.WALKING,
            unitSystem: google.maps.UnitSystem.METRIC
        }

        directionsService.route(request, function(result, status) {
            if(status == google.maps.DirectionsStatus.OK) {
                //Cashe the results to render directions//
                resultSet.push(result);                             
                if(resultSet.length==iteration){
                    for(var i=0; i<iteration; i++){
                        directionsDisplayList[i].setDirections(resultSet[i]);                                                           
                    }
                    map.fitBounds(bounds);                  
                }                   
            }           
        });

    }while (partialEndIndex <= maxmimumIndex);      
}

Solution

  • You cannot prevent from a fitBounds() to happen at the last request.

    How about using the latlngs of origin and destination and do a fitBounds() manually in coding after the last request? I think that should do the work.