Google Maps: marcador de renderizado sobre marcador de marcador

Question

Tengo un conjunto de marcadores que se agrupan en mi mapa. Otro conjunto de marcadores se muestran individualmente, y necesito que estos se muestren por encima de los clústeres. He intentado configurar zIndex en el objeto de opciones de clústeres, menor que el del segundo conjunto de marcadores, pero fue en vano. ¿Alguna idea de cómo hacerlo?

Answer 1

Por lo que sé, esto no se puede hacer. Los clústeres residen en un panel más alto que la imagen del marcador.

https://developers.google.com/maps/documentation/javascript/reference#MapPanes

Answer 2

Se puede hacer, pero es una forma bastante irregular hasta llegar allí ... Como dice Rick, el problema es que la propia MarkerClusterer añade un OverlayView con sus iconos de clúster en un panel superior como los marcadores regulares. La única forma de agregar un marcador por encima de los clústeres es vencer al clusterer con sus propias armas y agregar un OverlayView propio y agregar el marcado del icono del marcador a un panel aún más alto (lee sobre los paneles here). Realmente no me gusta, pero es la única forma que encontré.

Para hacer esto, tiene que crear una superposición personalizada implementando google.maps.OverlayView (reference), un buen ejemplo se puede encontrar here (con explicaciones, utilicé un poco de código).

Aquí es un prototipo CustomOverlay áspera:

// build custom overlay class which implements google.maps.OverlayView 
function CustomOverlay(map, latlon, icon, title) { 
    this.latlon_ = latlon; 
    this.icon_ = icon; 
    this.title_ = title; 
    this.markerLayer = jQuery('<div />').addClass('overlay'); 
    this.setMap(map); 
}; 
CustomOverlay.prototype = new google.maps.OverlayView; 
CustomOverlay.prototype.onAdd = function() { 
    var $pane = jQuery(this.getPanes().floatPane); // Pane 6, one higher than the marker clusterer 
    $pane.append(this.markerLayer); 
}; 
CustomOverlay.prototype.onRemove = function(){ 
    this.markerLayer.remove(); 
}; 
CustomOverlay.prototype.draw = function() { 
    var projection = this.getProjection(); 
    var fragment = document.createDocumentFragment(); 

    this.markerLayer.empty(); // Empty any previous rendered markers 

    var location = projection.fromLatLngToDivPixel(this.latlon_); 
    var $point = jQuery('<div class="map-point" title="'+this.title_+'" style="' 
          +'width:32px; height:32px; ' 
          +'left:'+location.x+'px; top:'+location.y+'px; ' 
          +'position:absolute; cursor:pointer; ' 
         +'">' 
         +'<img src="'+this.icon_+'" style="position: absolute; top: -16px; left: -16px" />' 
        +'</div>'); 

    fragment.appendChild($point.get(0)); 
    this.markerLayer.append(fragment); 
}; 

Esta superposición obtiene el mapa, un objeto LatLng y la dirección URL de un icono. Lo bueno es que puedes escribir tu propio HTML en la capa, lo malo es que tienes que manejar todo lo que la API de Maps hace por ti (como el manejo del anclaje de la imagen del marcador). El ejemplo solo funciona bien con imágenes de 32x32px donde el anclaje está en el medio de la imagen, por lo que sigue siendo bastante tosco.

Para utilizar el CustomOverlay, solo una instancia de esta manera:

// your map center/marker LatLng 
var myLatlng = new google.maps.LatLng(24.247471, 89.920990); 

// instantiate map 
var map = new google.maps.Map(
    document.getElementById("map-canvas"), 
    {zoom: 4, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP} 
); 

// create the clusterer, but of course with markers 
//var markerClusterer = new MarkerClusterer(map, []); 

// add custom overlay to map 
var customCustomOverlay = new CustomOverlay(map, myLatlng, 'http://www.foo.bar/icon.png'); 

Espero que esto funcione para usted.

Answer 3

Tuve el mismo problema pero no quería manejar una nueva superposición.

Sin tener que crear una Superposición específica, puede simplemente cambiar los índices z de los contenedores primarios de la superposición.

Esto se puede lograr mediante el uso de la siguiente función:

_changeOverlayOrder = function(map) { 
    var panes = map.getPanes(); 
    var markerOverlayDiv = panes.overlayImage.parentNode; 
    var clusterOverlayDiv = panes.overlayMouseTarget.parentNode; 
    // Make the clusters clickable. 
    if(!markerOverlayDiv.style.pointerEvents) { 
     markerOverlayDiv.style.cssText += ";pointer-events: none;"; 
    } 
    // Switch z-indexes 
    if(markerOverlayDiv.style.zIndex < clusterOverlayDiv.style.zIndex) { 
     var tmp = markerOverlayDiv.style.zIndex; 
     markerOverlayDiv.style.zIndex = clusterOverlayDiv.style.zIndex; 
     clusterOverlayDiv.style.zIndex = tmp; 
    } 
}; 

espero que ayude.