google-maps - すべてのマーカー オーバーレイがマーカーと重なるのを防ぐことはできません google maps api v3

Question

API バージョン 3 を使用した Google マップがあります。カスタム アイコンと番号付きラベルを使用してマーカーを作成したいと考えています。私はこれに最も受け入れられていると思われる方法、以下に提供する「labels.js」ソリューションを使用しようとしています。ただし、何を試しても、すべての番号付きオーバーレイがすべてのマーカーと重なっています (マーカーとラベルを同じ zIndex に設定しているにもかかわらず)。私が話していることを確認するには、提供されたスクリーンショットを参照してください。画面のマーカー 14 と 15 を見ると、15 のラベルが 14 のマーカーと重なっていることがわかりますが、そうではなく、14 のマーカーの下にあるはずです。

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

カスタム オーバーレイとの適切なオーバーラップに関する多くの議論は、次のコード行を中心に展開されます。

var pane = this.getPanes().overlayImage;

しかし、私はこれを用意しています。各ラベル オーバーレイとマーカーのペアを同じ zIndex に設定しています。適切にオーバーラップしているマーカーは、この zIndex の増分が機能していることを証明しています。以下にすべてのコードを提供しましたが、レンガの壁にぶつかりました。私は運がない限り、可能な限りすべてを試しました。すべての変数が適切に宣言されていると仮定します。

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 */

マーカー付きの地図を作成するコード:

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);

}