更改Google Maps Infowindow关闭图标

Question

如何更改Infowindow关闭按钮的默认图形？

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 Maps Utility - Infobox

Answer 3

使用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 4

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 5

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

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

Answer 6

将替换为（或您想要的任何图片），

之后

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