CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-markersinfowindow
Hunter
Hunter

Reputation: 61

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?

Upvotes: 3

Views: 5775

Answers (5)

Geek Goddess
Geek Goddess

Reputation: 639

I just got rid of the "x" entirely by using the following code:

.gm-style-iw button {
    display:none !important;
}

Upvotes: 2

Tomas
Tomas

Reputation: 1076

In my case was the button focus, solved like this:

.gm-style-iw button:focus {
    outline: 0;
}

Upvotes: 8

adam b
adam b

Reputation: 1

Try this, in side of InfoWindow.

<div style="position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; background-color: white; z-index: 2;"></div>

Upvotes: 0

Shawn Domingo
Shawn Domingo

Reputation: 1411

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.

Upvotes: 2

usrrname
usrrname

Reputation: 330

Right now there looks to be quite a bit of padding around the x in the screenshot. I'd inspect the element and see if there are any styles from parent elements or related classes overriding changes you make on its border or outline. If not, have you tried the following selectors?

outline: none

border-radius: 0

Upvotes: 0

Related Questions