I have a Google Map with multiple SVG overlays. But when I add a click event on these SVG, all the overlay is clickable and I want it to work only for the SVG path.
Here's a fiddle https://jsfiddle.net/gmkfhr9s/1/
I'm using the Custom overlays documentation as a base https://developers.google.com/maps/documentation/javascript/customoverlays
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'dotted';
div.style.borderWidth = '2px';
div.style.borderColor = 'white';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
//add element to clickable layer
this.getPanes().overlayMouseTarget.appendChild(div);
google.maps.event.addDomListener(img, 'mouseover', function() {
img.style.opacity = '0.5';
});
google.maps.event.addDomListener(img, 'mouseout', function() {
img.style.opacity = '1';
});
};
You can see that, with the mouseover event, all the overlay (the bordered box) is selected and ont only the SVG.
Is it possible to make only the SVG clickable ?
This thread is a similar problem if this can help you.
EDIT :
@Sphinxxx's answer works well.
I just want to add that, if you have multiple SVGs with some of them above others, you'll have to add this CSS to be able to click on them.
svg {
pointer-events: none;
}
path {
pointer-events: all;
}