How do I remove info-window arrow in map?

Question

Here I only want the info box - without arrow:

<info-window id="foo-iw" position="AK">
<div ng-non-bindable>
    <div class="header" ng-click="expand()">
        <span>Alaska <i class="caret"></i>
        </span>
   </div> 
</info-window>

Answer 1

Add this css:

.gm-style .gm-style-iw-t::after {
    background: none;
    box-shadow:none;
}

Answer 2

Here's a vanilla JS, no-plugin solution:

// Find where you actually open the infowindow.
infowindow.open(map);

// Paste the following:

// In OP's case, the element ID is actually 'foo-iw', as they're using a template.
el = document.getElementById('infowindow-content').parentNode.parentNode;

el = el.previousElementSibling || el.previousSibling;
el.children[0].setAttribute('class', 'hidden');
el.children[2].setAttribute('class', 'hidden');
// And of course, in CSS, have a generic .hidden{display:none;} rule.

This needs to run after you open the infowindow, because Google Maps does some DOM changes and if you use .parentNode too early, you'll be traversing the wrong area of your HTML trying to find the elements you want to work on. This is especially the case if you define a custom HTML template for your infowindow... GM will take it and shift it around in the DOM.

---

Anyways, using the above method you can set classes for all of the infowindow elements, like so:

el.setAttribute('class', 'infoWindowEntireBackground');

or

el.children[0].setAttribute('class', 'infoWindowArrowShadow');
el.children[2].setAttribute('class', 'infoWindowArrow');
el.children[1].setAttribute('class', 'infoWindowBGShadow');
el.children[3].setAttribute('class', 'infoWindowBG');

---

Caveat: Any DOM-traversing method like this will break if Google changes the structure of infowindow elements with some future version. In that case, either you watch out for it (silly) or you just run a specific version of GM script (which brings you other advantages ie control).

For reference, there are infowindow customization plugins like infobox, snazzy-info-window, but as far as I can tell most offer no arrow-hiding feature.

ALTERNATIVELY: infobubble has an arrow size property, among others, and if you set it to 0px, voila the arrow is hidden.

Answer 3

update 2023:

You can use css to hide the arrow

.gm-style .gm-style-iw-tc::after {
  background: none;
  box-shadow: none;
}

Answer 4

You can do it with jQuery, to hide the divs that draws the arrow. Just add the following code into your JS file:

// Hide infowindow arrow/marker pointer
setTimeout(function() {
    var arrow_div = $(".gm-style-iw").prev();

    $("div:eq(0)", arrow_div).hide();
    $("div:eq(2)", arrow_div).hide();
}, 2000);