Change Google Maps Infowindow Close Icon

Question

How can I change the default graphic for the Infowindow close button?

Kolman Robert · Answer 1 · 2014-01-24T08:50:06.417

5

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

edited Jan 24 '14 at 08:50

answered Jan 24 '14 at 08:30

Kolman Robert

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

score 2 · Answer 2 · answered Jan 21 '11 at 15:03

2

If you're using google maps API V3, then you might want to use the official add on infobox. Google Maps Utility - Infobox

answered Jan 21 '11 at 15:03

leviathan

11,080
5
42
40

score 1 · Answer 3 · answered Jan 24 '22 at 03:23

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:

score 0 · Answer 4 · answered Sep 23 '19 at 14:18

0

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

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

answered Sep 23 '19 at 14:18

Dimitrije Djekanovic

11
2

3

It 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

score 0 · Answer 5 · answered May 17 '22 at 11:12

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;

score 0 · Answer 6 · answered Sep 09 '11 at 11:03

0

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.

answered Sep 09 '11 at 11:03

Arthur Clemens

2,848
24
18

This only works with `livequery` plugin, you should point this out. – AlexB Oct 24 '14 at 15:27

score -1 · Answer 7 · edited May 23 '17 at 12:32

-1

There isn't really a way to do this. Your best bet would probably be to use a third-party or custom Infowindow.

There's a list of some third-party solutions here.

edited May 23 '17 at 12:32

Community

1
1

answered Oct 23 '09 at 18:56

Chris B

15,524
5
33
40

Allisone · Answer 8 · 2013-05-17T19:59:39.600

-1

To replace default icon with close icon (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');
});

edited May 17 '13 at 19:59

answered May 17 '13 at 19:53

Allisone

8,434
4
32
54

Change Google Maps Infowindow Close Icon

8 Answers8