I want to hide close button from InfoBox Window in Google Map API, but I have no idea how to do this.

CSS code:

#infobox {
  padding: 0 0 8px 0;
  margin: -95px 0 0 -15px;
  min-width: 180px;
  margin-top: 8px;
  color: rgb(94, 94, 94);
  font-family: Gotham SSm A,Gotham SSm B,Halvetica,sans-serif;
  font-size: 12px;
  z-index: 1000;
  transition: box-shadow .25s;
  padding: 1px;
  font-size: 12px;
  background-color: #ce93d8;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 8px #9c27b0;
  box-shadow: 0 0 8px #9c27b0;
}

JavaScript Code :

infobox = new InfoBox({
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('.gif') no-repeat",
                width: "150px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: ".gif", //close button icon
    infoBoxClearance: new google.maps.Size(1, 1)
});

I want to hide close button from InfoBox Window in Google Map API, but I have no idea how to do this.

CSS code:

#infobox {
  padding: 0 0 8px 0;
  margin: -95px 0 0 -15px;
  min-width: 180px;
  margin-top: 8px;
  color: rgb(94, 94, 94);
  font-family: Gotham SSm A,Gotham SSm B,Halvetica,sans-serif;
  font-size: 12px;
  z-index: 1000;
  transition: box-shadow .25s;
  padding: 1px;
  font-size: 12px;
  background-color: #ce93d8;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  -webkit-box-shadow: 0 0 8px #9c27b0;
  box-shadow: 0 0 8px #9c27b0;
}

JavaScript Code :

infobox = new InfoBox({
    disableAutoPan: false,
    maxWidth: 150,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: {
                background: "url('http://google-maps-utility-library-v3.googlecode./svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                width: "150px"
        },
    closeBoxMargin: "12px 4px 2px 2px",
    closeBoxURL: "http://www.google./intl/en_us/mapfiles/close.gif", //close button icon
    infoBoxClearance: new google.maps.Size(1, 1)
});

• javascript
• google-maps
• google-maps-api-3

• can you paste it on codepen? – Alexander Kleinhans Commented May 10, 2016 at 13:25

1 Answer 1

Just set closeBoxUrl to "". According to the docs:

"closeBoxURL: The URL of the image representing the close box. Note: The default is the URL for Google's standard close box. Set this property to "" if no close box is required."

You only need to change one line: closeBoxURL: "". So your plete code would look like this:

infobox = new InfoBox({
            disableAutoPan: false,
            maxWidth: 150,
            pixelOffset: new google.maps.Size(-140, 0),
            zIndex: null,
            boxStyle: {
                        background: "url('http://google-maps-utility-library-v3.googlecode./svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                        width: "150px"
                },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "", //THE CHANGE
            infoBoxClearance: new google.maps.Size(1, 1)
        });