RouteBoxer not working - google-maps-api-3

Question

A polyline is created using the click function. I am using the RouteBoxer Utility to create a set of boxes along this polyline. I have tested the drawBoxes function with an alert box and it is working but the boxes are not showing up. I guess i'm missing something. Any tips?
(function() {
window.onload = function() {
var places = [];
var path;
var string = "";
var para = document.getElementById("para");
var map = null;
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null;
//create reference to div tag in HTML file
var mapDiv = document.getElementById('map');
// option properties of map
var options = {
center: new google.maps.LatLng(-20.2796, 57.5074),
zoom : 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map object
var map = new google.maps.Map(mapDiv, options);
// create MVC array to populate on click event
var route = new google.maps.MVCArray();
var polyline = new google.maps.Polyline({
path: route,
strokeColor: '#ff0000',
strokeOpacity: 0.6,
strokeWeight: 5
});
polyline.setMap(map);
// create click event,attach to map and populate route array
google.maps.event.addListener(map,'click', function(e) {
// create reference to polyline object
path = polyline.getPath();
// add the position clicked on map to MVC array
path.push(e.latLng);
});
$('#compute').click(function() {
routeBoxer = new RouteBoxer();
distance = parseFloat((0.1) * 1.609344);
var boxes = routeBoxer.box(polyline,distance);
drawBoxes(boxes);
});
};
})();
// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
alert('working in function');
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: 3,
map: map
});
}
}

Answer 1

Your var map needs to be global, otherwise it is not visible from within function drawBoxes().
Move the declaration outside the function.
var map;
(function() {
window.onload = function() {
var places = [];
var path;
var string = "";
var para = document.getElementById("para");
var boxpolys = null;
var directions = null;
var routeBoxer = null;
var distance = null;
//create reference to div tag in HTML file
var mapDiv = document.getElementById('map');
// option properties of map
var options = {
center: new google.maps.LatLng(-20.2796, 57.5074),
zoom : 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// create map object -
//============== no 'var' keyword here ======================
map = new google.maps.Map(mapDiv, options);
... etc ...