Change Google Maps Infowindow Close Icon

Question

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

Answer 1

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: