Как убрать границу кнопки закрытия (x) из всплывающего информационного окна Google Maps?

Question

Есть ли способ избавиться от границы вокруг кнопки закрытия (x) в информационных окнах карт Google? Снимок экрана .

Я перепробовал все, что смог найти при переполнении стека.

Это не работает:

.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;}

Также это не так:

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

Может быть, замена изображения в информационном окне была бы альтернативным решением?Есть ли способ сделать это?

Answer 1

На основе документации Infowindow :

Класс InfoWindow не предлагает настройки.

Я бы предложил использовать настраиваемое всплывающее окно , так как оно не содержит кнопку закрытия при создании всплывающего окна.

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);
}

Вы можете увидеть пример здесь

Примечание: Пожалуйста, не забудьте добавить свой ключ API в пример.

Answer 2

Прямо сейчас на скриншоте видны небольшие отступы вокруг x.Я бы осмотрел элемент и посмотрел, есть ли какие-либо стили из родительских элементов или связанных классов, переопределяющие изменения, которые вы делаете на его границе или контуре.Если нет, то пробовали ли вы следующие селекторы?

outline: none

border-radius: 0