谷歌地图：使SVG叠加可点击

Question

我正在尝试使用谷歌地图在地图上显示线条并使这些线条可以点击。

这些线条将在Illustrator中绘制，导出为SVG，然后使用地面叠加功能导入到谷歌地图。这一切都正常。

我无法实现的只是让SVG中的行可点击。目前，整个SVG都是可点击的，包括它周围的所有透明背景。

这是一个小提琴：https://jsfiddle.net/95k49teu/21/

$( document ).ready(function() {
    initMap();
});

function initMap() {    
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: {lat: 40.740, lng: -74.18}
  });

    // GPS coordinates in degrees: A, A and B, B
  var imageBounds = {
    north: 40.773941, // A
    south: 40.712216, // B 
    east: -74.12544, // A
    west: -74.22655 // B
  };

  // Loop over all routes
  var myOverlay;
  myOverlay = new google.maps.GroundOverlay(
    'http://setec-astro.website/line1.svg',
    imageBounds);
  myOverlay.setMap(map);

}

尚未实施点击事件，但您的鼠标光标将显示可点击的区域（红线周围的方形区域）

将红线可点击的最佳方法是什么？我不确定是否应该更改SVG标记，或者我是否可以使用一些javascript和google maps API来执行此操作？

SVG看起来只是XML，所以如果我可以定义某种逻辑来编辑PHP后端的SVG文件，那就没问题了。