Reputation: 194
How to remove close icon of info window in google map. I tried to remove this icon, but couldn't find id or class for that.
So can anyone help me to remove close icon from info window?
Upvotes: 15
Views: 28602
Reputation: 3177
Add this in your CSS:
button.gm-ui-hover-effect {
visibility: hidden;
}
This worked perfectly with Maps API v3.43
Upvotes: 0
Reputation: 393
.gm-style-iw button>img {
display: none!important;
}
This code piece will make it to work. In my case image representing the close button was inside button tag in div classed gm-style-iw
Upvotes: 0
Reputation: 11
You can try this
::ng-deep .gm-style .gm-style-iw-c button {
display: none !important;
}
The magic inside it is ::ng-deep modifier that can search deeply for the styles and override them.
Upvotes: 1
Reputation: 21
button.gm-ui-hover-effect {
visibility: hidden;
}
That works as at today in Chrome and Edge
Upvotes: 2
Reputation: 664
This worked for me with just css
.gm-ui-hover-effect {
display: none !important;
}
Upvotes: 18
Reputation: 1
You can try this
.gm-style-iw + div{ display: none; } // hide div
.gm-style-iw + div + img{ display: none; } // hide img
Upvotes: 0
Reputation: 331
I tried all suggestions above, but failed. I tried using jquery $('.gm-style-iw').next().hide()
, it did not work as well.
This is what worked for me, in case someone needs it. This is what I did with GMAP API V3.
.gm-style .gm-style-iw + div {
display: none; /* <-- this will generally work on the fly. */
visibility: hidden; /* this 2 lines below are just for hard hiding. :) */
opacity: 0;
}
Generally, what it does is, it looks for direct sibling of that gm-style-iw
which is created dynamically by the API. The div
right next to the gm-style-iw
is the close button.
Hope that helps. :)
Upvotes: 2
Reputation: 13619
I did it setting closeBoxURL
to an empty string on the options object
infoboxOptions = {
closeBoxURL: '',
...
}
var infobox = new InfoBox(infoboxOptions);
Upvotes: 0
Reputation: 984
For people using Google Maps API v2, this function will open an info window with no close icon:
openInfoWindowHtml(html, {
maxWidth: 200, buttons: { close: { visible: false } }
});
Upvotes: 0
Reputation: 376
You can hide close button with CSS:
.gm-style-iw + div {display: none;}
Upvotes: 35