更改 Google 地图信息窗口关闭图标

Question

如何更改信息窗口关闭按钮的默认图形？

Answer 1

您可以使用 CSS 来完成此操作，如下所示：

img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"] 
{ content:url("/img/own_close_button.png"); }

适用于：

• Chrome 14.0.835.163
• Safari 4.0.5
• Opera 10.6
• 大多数移动设备（默认浏览器）

不适用于：

• FireFox 27.0
• IE 11.0

Answer 2

如果您使用的是谷歌地图 API V3，那么您可能需要使用官方添加的信息框。
Google 地图实用程序 - 信息框< /a>

Answer 3

首先，您需要隐藏默认的关闭图标：

.gm-style-iw button.gm-ui-hover-effect img {
    display: none !important;
}

其次，强制默认按钮（保存图像）具有完全不透明度：

.gm-style-iw button.gm-ui-hover-effect {
  opacity: 1 !important;
}

第三，设置您自己的图像并定位它：

.gm-style-iw button.gm-ui-hover-effect:before {
  display: block;
  content: "";
  background: url('assets/close-red.svg') center center no-repeat;
  background-size: cover;
  width: 8px;
  height: 8px;
  right: -19px;
  position: relative;
}

结果：

Answer 4

使用 jQuery，您可以更改图像文件位置。如果我有一个大小为 16px 的图像button_close.png：

jQuery('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').livequery(function() {
    jQuery(this).attr('width', 16).attr('height', 16).css({
        width: '16px',
        height: '16px'
    }).attr('src', 'button_close.png');
});

当然，只有当 Google 使用此文件位置时，这才有效。

Answer 5

button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}

button.gm-ui-hover-effect img {
display: none !important;
}

Answer 6

使用Dimitrije Djekanovic和授予 建议，这是当前 API 版本的工作版本 3.49（2022 年 5 月中旬）：

/* hides the x image */
button.gm-ui-hover-effect > span {
  display: none !important;
}

/* inserts the customized and clickable image instead */
button.gm-ui-hover-effect {
  opacity: 1 !important;
  background: url('close.svg') center center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  /* above is a good size or uncomment the next line */
  /* background-size: contain !important; */
}

要对此进行测试，请转到 StackBlitz 演示，由 官方文档并粘贴style.css文件，同时将background更改为：

background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
    center center !important;

Answer 7

确实没有办法做到这一点。您最好的选择可能是使用第三方或自定义信息窗口。

此处列出了一些第三方解决方案。

Answer 8

将 替换为 （或任何您可能喜欢的图像），之后

infowindow.open(map, marker);

您可以尝试添加这些行

$('img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]').each(function() {
    $(this).attr('width', 14);
    $(this).attr('height', 13);
    $(this).css({width: '14px',height: '13px'});
    $(this).attr('src','http://www.google.com/intl/en_us/mapfiles/close.gif');
});