Can't prevent overlapping markers from overlapping markers google maps api v3

I have google map using api version 3. I want to create markers with custom icon and numbered labels. I am trying to use what seems most appropriate for this "labels.js" solution that I presented below. However, no matter what I try, all numbered overlays overlap all markers (even though I am setting the marker and label with the same zIndex). Check out the screenshot to see what I'm talking about. If you look at markers 14 and 15 on the screen, you can see that mark 15 overlaps marker 14, but it shouldn't, it should be below the marker.

http://i.imgur.com/QoYqcHJ.jpg

A lot of discussion about properly overlapping custom overlays revolves around the line of code:

var pane = this.getPanes().overlayImage;

      

        
        
        
      

    

However, I have it. I set every overlapping label and marker pair to the same zIndex, and the correctly overlapping markers prove that this zIndex increment is working. I provided all my code below and ran into a brick wall. I've tried my best with no luck. Let's assume all variables were correctly declared.

label.js:

/* START label.js */

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
    // Initialization
    this.setValues(opt_options);

    // Here go the label styles
    var span = this.span_ = document.createElement('span');
    span.style.cssText = 'position: relative;' +
                          'white-space: nowrap;color:#666666;' +
                          'font-family: Arial; font-weight: bold;' +
                          'font-size: 11px;';

    var div = this.div_ = document.createElement('div');
    div.appendChild(span);
    div.style.cssText = 'position: absolute; display: none;';
};

Label.prototype = new google.maps.OverlayView;

Label.prototype.onAdd = function () {
    var pane = this.getPanes().overlayImage;
    pane.appendChild(this.div_);

    // Ensures the label is redrawn if the text or position is changed.
    var me = this;
    this.listeners_ = [
          google.maps.event.addListener(this, 'position_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'text_changed',
               function () { me.draw(); }),
          google.maps.event.addListener(this, 'zindex_changed',
               function () { me.draw(); })
     ];
};

// Implement onRemove
Label.prototype.onRemove = function () {
    this.div_.parentNode.removeChild(this.div_);

    // Label is removed from the map, stop updating its position/text.
    for (var i = 0, I = this.listeners_.length; i < I; ++i) {
        google.maps.event.removeListener(this.listeners_[i]);
    }
};

// Implement draw
Label.prototype.draw = function () {
    var projection = this.getProjection();
    var div = this.div_;

    // Some custom code to properly get the offset for the numbered label for each marker
    var labelOffset;
    if (parseInt(this.get('text').toString()) < 10) labelOffset = new google.maps.Point(6, -35);
    else labelOffset = new google.maps.Point(9, -35);

    var point1 = this.map.getProjection().fromLatLngToPoint(
                    (this.get('position') instanceof google.maps.LatLng) ? this.get('position') : this.map.getCenter()
                );
    var point2 = new google.maps.Point(
                    ((typeof (labelOffset.x) == 'number' ? labelOffset.x : 0) / Math.pow(2, map.getZoom())) || 0,
                    ((typeof (labelOffset.y) == 'number' ? labelOffset.y : 0) / Math.pow(2, map.getZoom())) || 0
                );
    var offSetPosition = this.map.getProjection().fromPointToLatLng(new google.maps.Point(
                    point1.x - point2.x,
                    point1.y + point2.y
                ));

    var position = projection.fromLatLngToDivPixel(offSetPosition);
    // End custom code

    div.style.left = position.x + 'px';
    div.style.top = position.y + 'px';
    div.style.display = 'block';
    div.style.zIndex = this.get('zIndex'); //ALLOW LABEL TO OVERLAY MARKER
    this.span_.innerHTML = this.get('text').toString();
};

/* END label.js */

      

        
        
        
      

    

Code for creating a map with markers:

var mapOptions = {
    zoom: myZoom,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
};

map = new google.maps.Map(document.getElementById("gmap"), mapOptions);

/* Insert logic here to iterate and add each marker */

// This function is called for every marker, i increases by 1 each call
function addMarker(latlng, mylabel, isShowroom, data, type, i) {
    var markerImage;
    var labelColor = '#666666';

    if (isShowroom) {
        markerImage = 'http://www.subzero-wolf.com/common/images/locator/pin-showroom.png';
    } else {
        if (type == 'service') {
            markerImage = '/common/images/locator/pin-dealer.png';
        } else if (type == 'parts') {
            markerImage = '/common/images/locator/pin-parts.png';
        } else {
            markerImage = '/common/images/locator/pin-dealer.png';
        }
    }

    var myMarker = new google.maps.Marker({
        position: latlng,
        draggable: false,
        clickable: true,
        map: map,
        icon: markerImage,
        zIndex: isShowroom ? 9999 : i
    });

    var html = "test content"

    myMarker['isShowroom'] = isShowroom;
    myMarker['infowindow'] = new google.maps.InfoWindow({
        content: html
    });

    google.maps.event.addListener(myMarker, 'click', function() {
        this['infowindow'].open(map, this);
    });

    // Dont show a label for the showroom because this is the marker with the star icon, no number needed
    if (!isShowroom) {
        var label = new Label({
            map: map
        });
        label.set('zIndex', i);
        label.bindTo('position', myMarker, 'position');
        label.set('text', mylabel);
    }

    markerArray.push(myMarker);

}