Click-Through GroundOverlay with Gmap3

While building a coordinate tracing application with Gmap3 and a PNG overlay I came across an issue with using the PNG image as a ground overlay. Click events on the map element do not take effect when the click event is within the bounds of the image.

I've tried using CSS pointer-events: none on the image element and parent divs, which simply prevented click events anywhere on the map. I've tried using a toggle function to hide the div/img from the map, still no click events within the bounds.

I also tried setting a click event on the overlay, unfortunately there are no latLng properties available on the overlay so that method was scrapped as well.

My temporary solution is to have two absolutely positioned maps, same coords but one without the overlay and one with, a toggle button hides the map with the overlay, requiring the user to press their finger on the screen and trace by abusing the toggle button. Obviously this becomes a problem when people zoom/pan the map because the position is lost.

http://jsfiddle.net/abestic9/TTRTg/

How can I allow for this method of manual map tracing, or is there an easier way to do what I'm trying to do?

You don't need 2 maps. The latLng isn't available for a click-event of a gmap3-groundoverlay, but it's available for a native google.maps.GroundOverlay:

google.maps.event.addListener(
    //the google.maps.GroundOverlay
  $('#map').gmap3({get:{name:'groundoverlay',all:false}}), 
  'click', 
  function(e) {
    //trigger click-event for the map
  google.maps.event.trigger($('#map').gmap3('get'), 'click', e);
});

google.maps.event.addListener(
  $('#map').gmap3('get'), 
  'click', 
  function(e) {
    //your code
});