title: Google Maps OverlayView: make only SVG clickable
body: <p>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.</p>
  
  <p>Here's a fiddle
  <a href="https://jsfiddle.net/gmkfhr9s/1/" rel="nofollow noreferrer">https://jsfiddle.net/gmkfhr9s/1/</a></p>
  
  <p>I'm using the <em>Custom overlays</em> documentation as a base
  <a href="https://developers.google.com/maps/documentation/javascript/customoverlays" rel="nofollow noreferrer">https://developers.google.com/maps/documentation/javascript/customoverlays</a></p>
  
  <pre><code>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';
    });
  };
  </code></pre>
  
  <p>You can see that, with the mouseover event, all the overlay (the bordered box) is selected and ont only the SVG.</p>
  
  <p>Is it possible to make only the SVG clickable ?</p>
  
  <p>This <a href="https://stackoverflow.com/questions/41913388/google-maps-making-svg-overlays-clickable">thread</a> is a similar problem if this can help you.</p>
  
  <hr>
  
  <p><strong>EDIT :</strong></p>
  
  <p>@Sphinxxx's answer works well.</p>
  
  <p>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.</p>
  
  <pre><code>svg {
    pointer-events: none;
  }
  path {
    pointer-events: all;
  }
  </code></pre>