Google offers a very impressive map service. Between JS and CSS, styling is usually very straightforward with tools like the Styling Wizard from Google:
https://mapstyle.withgoogle.com/
However, some things can fall through the cracks. Point of the matter – the arrow on the InfoWindow/Bubble/Box.
Normally, the location bubble appears above the marker. To change the placement of this bubble, I typically write code like this:
var infowindow = new google.maps.InfoWindow({ content: info, pixelOffset: new google.maps.Size(200,125), });
That moves the bubble to the right of the marker (200 pixels to the right and 125 pixels down). Oddly, the arrow that normally points down still points down, which makes no sense if the bubble is on the right. Unfortunately, Google missed on handling and/or customizing the arrow direction.
To get around this oversight, I use CSS to style the arrow and make it disappear. Something like this:
#map > div > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(4) > div > div:nth-child(1) { > div:nth-child(1), > div:nth-child(3) { display: none; } }
I get this crazy CSS selector by going into Chrome’s Dev Tools, finding the arrow in the hierarchy, right-clicking on the node, and selecting “Copy” >> “CSS Selector”.
Take note that this is the second time I have had to update this CSS selector. It appears that Google is prone to changing this.