How can I change the default graphic for the Infowindow close button?
8 Answers
You can do it with CSS, like this:
img[src="http://maps.gstatic.com/intl/en_us/mapfiles/iw_close.gif"]
{ content:url("/img/own_close_button.png"); }
Works on:
- Chrome 14.0.835.163
- Safari 4.0.5
- Opera 10.6
- Most mobile devices (default browser)
Does not work on:
- FireFox 27.0
- IE 11.0

- 334
- 3
- 4
-
Best solution here, as the others are either jQuery dumps or out of date. This is a question about styling, CSS is for styling, so a CSS solution makes the most sense. – Josh from Qaribou Jan 08 '15 at 23:11
-
Problem with this is that the containing div has no class and a style attribute fixed to 13px and overflow:hidden, so you can only use it for 13px images. – Whelkaholism Sep 13 '16 at 12:02
-
The problem with this answer is that it depends on the URL to the default image never changing domain, protocol, name, culture, path....which has apparently changed since this answer was posted (https://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png is what I see live now). – Justin Ryder Mar 13 '17 at 17:29
If you're using google maps API V3, then you might want to use the official add on infobox. Google Maps Utility - Infobox

- 11,080
- 5
- 42
- 40
First you need to hide the default close icon:
.gm-style-iw button.gm-ui-hover-effect img {
display: none !important;
}
Second, force the default button (that holds the image) to have full opacity:
.gm-style-iw button.gm-ui-hover-effect {
opacity: 1 !important;
}
Third, set your own image and position it:
.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;
}
Result:

- 5,709
- 2
- 38
- 50
button.gm-ui-hover-effect {
background: url(your-img.png) !important;
background-size: contain !important;
}
button.gm-ui-hover-effect img {
display: none !important;
}

- 11
- 2
-
3It would be better to explain while you post a part / code-snippet. Please explain. – smilyface Sep 23 '19 at 14:46
-
With this css i managed to disable original close icon, and add custom one. :) – Dimitrije Djekanovic Sep 24 '19 at 15:43
-
That's cool. I actually mean to describe how it works (because in the question he didn't asked about any class names, I guess it's default). If you describe your answer, it would be helpful to someone else too (pls update the answer - your post) – smilyface Sep 25 '19 at 17:37
Using what Dimitrije Djekanovic and Grant suggested, here is a working version for the current API version 3.49 (Mid-May of 2022):
/* 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; */
}
To test this, go to the StackBlitz demo provided by the official documentation and paste the style.css
file while having background
changed to:
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/414px-Mr._Smiley_Face.svg.png')
center center !important;

- 731
- 1
- 6
- 21
With jQuery you can change the image file location. If I have an image button_close.png that is 16px in size:
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');
});
Of course this only works as long as Google uses this file location.

- 2,848
- 24
- 18
To replace with
(or whatever image you might like), after
infowindow.open(map, marker);
you can try to add these lines
$('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');
});

- 8,434
- 4
- 32
- 54