How to completely remove google maps marker clickable area on mobile web?

Question

Basically I have a map where users can tap to place markers. But when there already is a marker on the map, and I try to place one nearby, the marker intercepts the click event, so the map cannot receive it and place another marker. I have clickable set to false and I have created no listeners for the markers.

This is only an issue on mobile - I fixed it on desktop by setting the shape of the marker to a 0 by 0 px rectangle:

shape: {
  type: 'rect',
  coords: [0,0,0,0]
}

This "shape" property only works on desktop - when I load the page with the chrome developer tools device emulator thing, the HTML area element that sets the clickable area is not there. Instead, there is just a div element and an img element on the marker. If I set the height and width of these elements to 0 (with inspect element), the map is able to receive click events on the marker. But I don't know how to do that with CSS or Javascript because I see no way to access those elements.

The problem seems to be that when google maps detects a mobile device, it listens for click events through the marker img element. On desktop, it creates an area element that takes clicks. So is there any way I can edit the heights and widths of elements that the maps API creates? Or is there any other way I can set the clickable area of a marker on mobile?

Minimum reproducible example

To emulate my problem, press ctrl+shift+I and then ctrl+shift+M, then where it says "Responsive" select any mobile device (iPad is best since it's easier to navigate). Reload the page. Tap the map to place a marker and then tap that marker. You can then turn off dev tools, reload the page, and try placing two markers again to see what's supposed to happen.

Answer 1

If I remove this line:

title: 'markertitle',

Everything works fine. For some reason adding a title to the marker creates an element on top of it that intercepts clicks.