Colocar un MapLabel encima de un polígono en Google Maps V3

Question

Estoy tratando de colocar un MapLabel encima de un polígono en Google Maps V3. Intenté establecer MapLabel zIndex en 2 y Polygon zIndex en 1 sin suerte. ¿No es esto posible ya que el Polígono realmente no sigue a zIndex?

He creado un jsFiddle para ustedes de revisar: http://jsfiddle.net/7wLWe/1/

Solución: En cambio maplabel.js:

mapPane.appendChild(canvas); 

a:

floatPane.appendChild(canvas); 

La razón es porque floatPane está sobre todas las capas del mapa (panel 6)

http://code.google.com/apis/maps/documentation/javascript/reference.html#OverlayView

Answer 1

¡Es fantástico ver que está utilizando la biblioteca de utilidades MapLabel!

Como has descubierto, MapLabel se encuentra en un panel de mapa diferente. zIndex solo se respeta dentro de un panel determinado.

Answer 2

Si no quieres tocar maplabel.js, puede agregar esta función para cambiar el z-index de la matriz de las etiquetas (aunque si tiene otros elementos canvas, puede que tenga que alterar la función):

//change the z-index of the canvas elements parents to move them above polygon layer 
google.maps.event.addListenerOnce(map, 'idle', function(){ 
//var canvasElements = document.getElementsByTagName('canvas');//plain js to get the elements 
var canvasElements = jQuery('canvas'); //jquery for easy cross-browser support 
    for(var i=0; i<canvasElements.length; i++){ 
     canvasElements[i].parentNode.style.zIndex = 9999; 
    } 

}); 

Answer 3

Esto es probablemente un hallazgo tardío ... pero espero que alguien lo encuentre útil.

Si no desea utilizar floatPane (Solución de Juan) ya que este será siempre encima de todo, y quieren dar una costumbre zIndex .. editar el maplabel.js. Añadir la siguiente línea justo antes del final de MapLabel.prototype.onAdd = function() {

if (canvas.parentNode != null) { 
    canvas.parentNode.style.zIndex = style.zIndex; 
} 

Ahora puede pasar zIndex mientras se crea una maplabel:

var mapLabel = new MapLabel({ 
    text: "abc", 
    position: center, 
    map: map, 
    fontSize: 8, 
    align: 'left', 
    zIndex: 15 
}); 

Answer 4

var maplabel = new MapLabel.... 
$(maplabel.getPanes().mapPane).css('z-index', maplabel.zIndex); 

jQuery lo hizo bastante simple para mí sin cambiar maplabel.js También encontré una solución alternativa

$(maplabel.getPanes().mapPane).addClass('map-pane'); 

y luego definir el índice z en una hoja de estilo

Answer 5

Bosquejé este CodePen example la utilización de la clase gmaps-labels. Se basa en el violín en la Q de arriba y agrega la ose de una clase LabelOverlay. La clase requiere un new google.maps.LatLng, dimensiones (en unidades LatLng) de una casilla centrada en el punto de la etiqueta (si la etiqueta se desbordara en esta casilla, ocúltela y en algunos CSS. Aquí hay un código auxiliar, consulte la demostración en el CodePen.

var MIN_BOX_H = 0.0346, 
    MIN_BOX_W = 0.121, 
    MAX_BOX_H = 0.001, 
    MAX_BOX_W = 0.03; 



var overlay1 = new LabelOverlay({ 
    ll  : myLatlng, 

    minBoxH  : MIN_BOX_H, 
    minBoxW  : MIN_BOX_W, 

    maxBoxH  : MAX_BOX_H, 
    maxBoxW  : MAX_BOX_W, 

    ... 

    label  : "I want on top", 
    map  : map 
});