Clever Geek Handbook

Fit Bounds in Google Map Render Directions

I am trying to display routes for 48 waypoints, but google only allows 8 waypoints to be displayed for each request. so I am making multiple requests (6 in my case). However, the API somehow did fitBounds () for the last request.

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

My code looks like this: -

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);      
}
+3


source to share


2 answers


You cannot prevent execution fitBounds()

on the last request.



How about using latlngs

source and destination and doing it fitBounds()

manually in the encoding after the last request? I think this should work.

0


source


Use the preserveViewport parameter for DirectionsRenderer to prevent automatic scaling of the route, and then set the viewport of your choice.

{preserveViewport: true}

Then concatenate the bounds returned in each individual direction with google.maps.LatLngBounds.union

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({
      preserveViewport: true, // prevent auto zoom to result
      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) {
          // empty bounds
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < iteration; i++) {
            directionsDisplayList[i].setDirections(resultSet[i]);
            // combine all the bounds of the results together with union
            if (i == 0) {
              bounds = resultSet[i].routes[0].bounds;
            } else {
              bounds.union(resultSet[i].routes[0].bounds);
            }
          }
          // fit the map to the resulting bounds
          map.fitBounds(bounds);
        }
      }
    });

  } while (partialEndIndex <= maxmimumIndex);
}


proof of concept scripts (with 51 points)

snippet of code:

var geocoder;
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  document.getElementById('info').innerHTML = "entries:" + directionList.length;
  DisplayDirection(directionList);
}
google.maps.event.addDomListener(window, "load", initialize);

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({
      preserveViewport: true,
      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) {
          var bounds = new google.maps.LatLngBounds();
          for (var i = 0; i < iteration; i++) {
            directionsDisplayList[i].setDirections(resultSet[i]);
            if (i == 0) {
              bounds = resultSet[i].routes[0].bounds;
            } else {
              bounds.union(resultSet[i].routes[0].bounds);
            }
          }
          map.fitBounds(bounds);
        }
      }
    });

  } while (partialEndIndex <= maxmimumIndex);
}
var directionList = [
  "52.1615470947258,20.80514430999756",
  "52.15991486090931,20.804049968719482",
  "52.15772967999426,20.805788040161133",
  "52.15586034371232,20.80460786819458",
  "52.15923693975469,20.80113172531128",
  "52.159849043774074, 20.791990756988525",
  "52.15986220720892,20.790467262268066",
  "52.16202095784738,20.7806396484375",
  "52.16088894313116,20.77737808227539",
  "52.15255590234335,20.784244537353516",
  "52.14747369312591,20.791218280792236",
  "52.14963304460396,20.79387903213501",
  "52.1704725, 20.8118862",
  "52.1845184, 20.8400429",
  "52.200343, 20.8274304",
  "52.2015168, 20.799051599999984",
  "52.18724, 20.76437569999996",
  "52.18032700000001, 20.75405180000007",
  "52.1716078, 20.743079899999998",
  "49.9636566, 20.1216374",
  "51.8484715, 20.9852811",
  "51.40272359999999, 21.14713329999995",
  "51.2464536, 22.5684463",
  "51.1431232, 23.47119859999998",
  "50.7230879, 23.251968",
  "50.5826005, 22.053585999999996",
  "50.0411867, 21.999119599999972",
  "50.0121011, 20.9858407",
  "49.6174535, 20.7153326",
  "49.4215158, 20.959420799999975",
  "49.0018324, 21.23931189999996",
  "48.7163857, 21.2610746",
  "48.0963631, 20.762385999999992",
  "47.9025348, 20.3772284",
  "47.1621355, 20.1824712",
  "47.497912, 19.04023499999994",
  "48.3061414, 18.076375999999982",
  "48.1485965, 17.1077477",
  "48.2081743, 16.3738189",
  "48.30694, 14.28583",
  "48.16542, 14.03664",
  "48.05009, 14.41827",
  "47.80949, 13.055",
  "47.8571272, 12.1181047",
  "48.1351253, 11.58198",
  "52.52000659999999, 13.404953999999975",
  "53.5510846, 9.99368179999999",
  "50.1109221, 8.6821267",
  "52.3702157, 4.895167899999933",
  "50.8503396, 4.3517103",
  "48.856614, 2.3522219"
];
      

        
        
        
      

    
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
      

        
        
        
      

    
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="info"></div>
<div id="map_canvas"></div>
Run codeHide result


+6


source






More articles:


All Articles