Google Maps and RouteBoxer will not display polygon lines - google-maps

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:
mapOptions is not defined (probably not a real problem)
directionsDisplay is null (not initialized)
result is undefined (typo, or cut and paste error)
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>