Google Maps and RouteBoxer will not display polygon lines

Question

Thanks in advance for any help you can provide! I'm using RouteBoxer in Google Maps API V3, but for some reason I can't get the lines to appear. I'm concerned that the function isn't running at all, and it's necessary for the next step of my project: passing lat and long to find pois along the route. Seeing the lines on the map will help me make sure it's running correctly.

Here is my code

<script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var routeBoxer = null;
        var boxpolys = null;
        var rdistance = 20; // km

        function initialize() {
          //directionspanelstuff
          //directionsdisplaystuff
          //mapoptions
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          directionsDisplay.setMap(map);
          routeBoxer = new RouteBoxer();
        }

        function calcRoute() {
          //startendwaypoints

          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");

              // Box the overview path of the first route
                var path = result.routes[0].overview_path;
                var boxes = routeBoxer.box(path, rdistance);
                clearBoxes();
                drawBoxes(boxes);

                for (var i = 0; i < boxes.length; i++) {
                  var bounds = box[i];
                  // Perform search over this bounds 
                }
            }
          });
        }

        // Draw the array of boxes as polylines on the map
        function drawBoxes(boxes) {
          boxpolys = new Array(boxes.length);
          for (var i = 0; i < boxes.length; i++) {
            boxpolys[i] = new google.maps.Rectangle({
              bounds: boxes[i],
              fillOpacity: 0,
              strokeOpacity: 1.0,
              strokeColor: '#000000',
              strokeWeight: 1,
              map: map
            });
          }
        }

        // Clear boxes currently on the map
        function clearBoxes() {
          if (boxpolys != null) {
            for (var i = 0; i < boxpolys.length; i++) {
              boxpolys[i].setMap(null);
            }
          }
          boxpolys = null;
        }
    </script>

Answer 1

There are 4 javascript errors pointed out by the javascript console:

1. mapOptions is not defined (probably not a real problem)
2. directionsDisplay is null (not initialized)
3. result is undefined (typo, or cut and paste error)
4. box is undefined (typo)

working example

code snippet:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var routeBoxer = null;
var boxpolys = null;
var rdistance = 20; // km

function initialize() {
  //directionspanelstuff
  //directionsdisplaystuff
  //mapoptions
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 10,
    center: new google.maps.LatLng(41.084951, 29.016048),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  routeBoxer = new RouteBoxer();
  calcRoute();
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  //startendwaypoints

  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");

      // Box the overview path of the first route
      var path = response.routes[0].overview_path;
      var boxes = routeBoxer.box(path, rdistance);
      clearBoxes();
      drawBoxes(boxes);

      for (var i = 0; i < boxes.length; i++) {
        var bounds = boxes[i];
        // Perform search over this bounds 
      }
    }
  });
}

// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
  }
}

// Clear boxes currently on the map
function clearBoxes() {
  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}
google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/routeboxer/src/RouteBoxer.js"></script>
<input id="start" type="text" onchange="calcRoute();" value="chicago, il"></input>

<input id="end" type="text" onchange="calcRoute();" value="st louis, mo"></input>

<div id="map_canvas" style="height: 400px; width:500px;"></div>
<div id="info"></div>