Change Google Maps Infowindow Close Icon

How can I change the default graphic for the Infowindow close but开发者_如何学JAVAton?

---

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

---

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

---

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:

---

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.

---

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

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

---

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;

---

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.

---

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