javascriptgoogle-mapsgoogle-maps-markersinfowindow

How to remove close button (x) border from google maps info window pop up?

Is there any way to get rid of the border around the close (x) button on google maps info windows? Screenshot.

I have tried everything I can find on stack overflow.

This doesn't work:

.gm-style .gm-style-iw + div {
display: none; /* <-- this will generally work on the fly. */
visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
opacity: 0;}

Nor does this:

.gm-style-iw + div {display: none;}

Maybe replacing the image in the info window would be an alternate solution? Is there any way to do that?

Solution

  • Based on the Infowindow documentation:

    The InfoWindow class does not offer customization.

    I would suggest that you use the customized popup as this doesn't contain the close button in the creation of the popup.

    function Popup(position, content) {
this.position = position;

content.classList.add('popup-bubble');

// This zero-height div is positioned at the bottom of the bubble.
var bubbleAnchor = document.createElement('div');
bubbleAnchor.classList.add('popup-bubble-anchor');
bubbleAnchor.appendChild(content);

// This zero-height div is positioned at the bottom of the tip.
this.containerDiv = document.createElement('div');
this.containerDiv.classList.add('popup-container');
this.containerDiv.appendChild(bubbleAnchor);

// Optionally stop clicks, etc., from bubbling up to the map.
google.maps.OverlayView.preventMapHitsAndGesturesFrom(this.containerDiv);
}

    You may see the example here

    Note: Please don't forget to add your API key in the sample.