Hacer que la superposición personalizada se pueda hacer clic (Google Maps API v3)

Question

Tengo una clase de superposición personalizada (ImageOverlay) que hereda de google.maps.OverlayView. Quiero que responda a los eventos de clic de Google Maps (no solo a los eventos de clic de DOM), pero simplemente usar addListener no parece ser el truco.

p. Ej. Tengo una matriz shapes que contiene una mezcla de google.maps.Polygon y ImageOverlay objetos:

for (var i in shapes) { 
    google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')}); 
} 

Al hacer clic en los polígonos activa una alerta, pero al hacer clic en las superposiciones personalizadas no hace nada.

¿Cómo hago que la API de Google Maps trate las superposiciones como clicables?

Answer 1

Actualización para v3: overlayLayer no acepta eventos de ratón más. Agregue su superposición al overlayMouseTarget en su lugar, agregue el oyente, y debería recibir los eventos del mouse normalmente.

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div); 

// set this as locally scoped var so event does not get confused 
var me = this; 

// Add a listener - we'll accept clicks anywhere on this div, but you may want 
// to validate the click i.e. verify it occurred in some portion of your overlay. 
google.maps.event.addDomListener(div, 'click', function() { 
    google.maps.event.trigger(me, 'click'); 
}); 

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

Answer 2

Maps API no puede determinar automáticamente en qué partes de su superposición se puede hacer clic (es decir, si renderiza una imagen con fondo transparente, si corresponde a su clase de superposición determinar si los clics en la región transparente cuentan como clics válidos o no).

Debe agregar escuchas DOM a las superposiciones que dibuje, y luego desencadenar su propio evento de clic en la API de Maps si este es un clic válido.

Ejemplo:

FooBar.prototype.onAdd = function() { 
    // Create a div and append it to a map pane. 
    var div = document.createElement('div'); 
    div.style = "height: 100px; width: 100px"; 
    this.getPanes().overlayLayer.appendChild(div); 

    // set this as locally scoped var so event does not get confused 
    var me = this; 

    // Add a listener - we'll accept clicks anywhere on this div, but you may want 
    // to validate the click i.e. verify it occurred in some portion of your overlay. 
    google.maps.event.addDomListener(div, 'click', function() { 
    google.maps.event.trigger(me, 'click'); 
    }); 

    // Position your overlay etc. 
} 
</code> 

Answer 3

También puede detener la propagación de eventos, por lo que los clics en la superposición no se propagarán a los elementos inferiores (por ejemplo, polígonos, marcadores, etc, depende de su panel)

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div); // or floatPane 

// set this as locally scoped var so event does not get confused 
var me = this; 

// Add a listener - we'll accept clicks anywhere on this div, but you may want 
// to validate the click i.e. verify it occurred in some portion of your overlay. 
google.maps.event.addDomListener(div, 'click', function(events) { 
    if (/*handling event*/) { 
     event.preventDefault(); // The important part 
    } 
    else { 
     google.maps.event.trigger(me, 'click'); 
    } 
}); 

Answer 4

para GoogleAPI v3. Como chicos dijeron más adelante, pero con algunas correcciones:

En LocalityCustomOverlay.prototype.onAdd función:

var self = this; 
google.maps.event.addDomListener(this._div, 'click', function(event) { 
    // stop click reaction on another layers 
    event.stopPropagation(); 

    // add also event to 3rd parameter for catching 
    google.maps.event.trigger(self, 'click', event); 
}); 

En el exterior, directamente a su plantilla personalizada:

google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) { 
    console.log('event:', event); 
});