MarkerWithLabel icon text bug

MarkerWithLabel not always setting z-index propertly for marker text when there's marker overlap.

by johntrepreneur

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<h3>Looks for marker text overlap which is happening, but not always.</h3>
<input type="button" value="add 100 markers - still under a minute" onclick="clearExistingMarkers();addMarkers(100);" ></button><br>
<input type="button" value="add markers in increments" onclick="addMarkers($('#numMarkers').val(), true);"><input id="numMarkers" type="text" value="10"/></button><br>
<input type="button" value="clear markers" onclick="clearExistingMarkers();" ></button><br>
markers added <span id="span">0</span>
<div id="map"></div>

CSS

#map {
     height: 400px;
     width: 600px;
 }
.labels {
    color: white;
    background-color: red;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    text-align: center;
    width: 9px;
    white-space: nowrap;
}

JavaScript

var locations = new Array();
populateLocations();
var markers = new Array();
var i;

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(32.739867, -117.120592),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

function addMarkers(numMarkersToUse, inIncrements)
{
    if (i == null || typeof i === 'undefined')
        i = 0;
    
    var upperRange;
    if (inIncrements == true)
        upperRange = parseInt(numMarkersToUse) + i;
    else
    {
        i = 0;
        upperRange = numMarkersToUse;
    }
    
    for (i; i < upperRange; i++)
    {
        if (i > (locations.length - 1))
        {
            alert('no more markers to add!');
            return;
        }
        
        markers.push(
            new MarkerWithLabel({
                map: map,
                position: new google.maps.LatLng(locations[i].LATITUDE, locations[i].LONGITUDE),
                //icon: {
                //    path: getSvgPath(), 
                //    fillColor: 'red',
                //    fillOpacity: 1,
                //    strokeColor: 'blue'
                //},
                labelContent: "A",
                labelAnchor: new google.maps.Point(5, 36),
                labelClass: "labels",
                labelInBackground: false
            })
        );
    }
    $('#span').html(markers.length);
}

function clearExistingMarkers()
{
    for (var x = 0; x < markers.length; x++)
    {
         markers[x].setMap(null);   
    }
    markers = [];
    $('span').html('0');
    
    i = 0;
}

function getSvgPath()
{
    return 'm 19.385267,10.727526 c 0,3.55691 -2.685221,6.19207 -4.565082,8.51724 -1.100799,1.36153 -3.302145,4.9675 -4.8745364,15.31648 -1.5723911,-10.34898 -3.7737383,-13.95495 -4.8644741,-15.31683 -2.0203789,-2.52264 -4.56459726,-4.96021 -4.56459726,-8.51689 0,-5.6393596 4.22390026,-10.2109496 9.43434496,-10.2109496 5.2104448,0 9.4343448,4.57159 9.4343448,10.2109496 z';
    
    //'M 5, 5 m...