google maps: marker-styled overlays

see: http://stackoverflow.com/questions/23500313/google-maps-multiple-custom-markers-with-numbers-referencing-to-item-in-list

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
      }
      .HtmlMarker {
          font-size:18px;
          margin-top:-6px;
          padding: 4px 10px;
          position: relative;
          display:inline-block;
          cursor:pointer;
      }
      .HtmlMarker:after {
          position: absolute;
          display: inline-block;
          border-bottom: 6px solid transparent;
          border-top: 6px solid;
          border-top-color:inherit;
          border-right: 6px solid transparent;
          border-left: 6px solid transparent;
          left: 50%;
          margin-left:-6px;
          top:100%;
          content:'';
      }

JavaScript

function randLatLng() {
    return new google.maps.LatLng(((Math.random() * 17000 - 8500) / 100), ((Math.random() * 36000 - 18000) / 100));
}

function initialize() {
    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(0, 0)
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    css = ['border-color:white;background:white;color:black;',
        'border-color:red;background:red;color:white;',
        'border-color:blue;background:blue;color:white;',
        'border-color:yellow;background:yellow;color:black;',
        'border-color:black;background:black;color:white;',
        'border-color:orange;background:orange;color:black;', ]
    for (var i = 0; i < 100; ++i) {
        new HtmlMarker(map,
        randLatLng(),
        Math.ceil(Math.random() * 10),
        css[0]

        );
        css.push(css.shift())
    }
}




HtmlMarker.prototype = new google.maps.OverlayView();

function HtmlMarker(map, position, content, cssText) {
    this.setValues({
        position: position,
        container: null,
        content: content,
        map: map,
        cssText: cssText
    });

    this.onAdd = function () {
        var that = this,
            container = document.createElement('div'),
            content = this.get('content'),
            cssText = this.get('cssText') || 'border-color:#fff;background:#fff;color:#000;';
        container.className = 'HtmlMarker';
        container.style.cssText = cssText;

        google.maps.event.addDomListener(container, 'click',

        function () {
            google.maps.event.trigger(that, 'click');
        });
        if (typeof content.nodeName !== 'undefined') {
            container.appendChild(content);
        } else {
            container.innerHTML = content;
        }


        container.style.position = 'absolute';
        this.set('container', container)
        this.getPanes().floatPane.appendChild(container);
    }

    this.draw = function...