MarkerWithLabel icon text bug
MarkerWithLabel not always setting z-index propertly for marker text when there's marker overlap.
HTML
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&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...