remove close icon from the google map info window

Question

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?

score 35 · Answer 1 · edited Oct 19 '14 at 20:20

35

You can hide close button with CSS:

.gm-style-iw + div {display: none;}

edited Oct 19 '14 at 20:20

J0e3gan

8,740
10
53
80

answered Oct 19 '14 at 19:56

Eugene Godun

376
3
5

score 18 · Answer 2 · answered Jul 04 '19 at 07:17

18

This worked for me with just css

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

answered Jul 04 '19 at 07:17

hassanrazadev

626
9
15

I'm using `@angular/google-maps` and I had to do it like this `::ng-deep .gm-ui-hover-effect` – Quethzel Diaz Jul 22 '21 at 16:09

score 2 · Answer 3 · edited Jan 26 '17 at 01:27

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. :)

score 2 · Answer 4 · edited Jul 29 '19 at 14:16

2

button.gm-ui-hover-effect {
    visibility: hidden;
}

That works as at today in Chrome and Edge

edited Jul 29 '19 at 14:16

Adrita Sharma

21,581
10
69
79

answered Jul 29 '19 at 13:54

PeeBee

21
1

score 1 · Answer 5 · answered Dec 27 '19 at 10:08

1

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.

answered Dec 27 '19 at 10:08

Hady Zeitouny

11
1

score 0 · Answer 6 · edited Mar 02 '16 at 13:35

0

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

edited Mar 02 '16 at 13:35

Preview

35,317
10
92
112

answered Dec 12 '13 at 13:33

Shahe

964
2
13
34

where do i insert in my code. my sample code `marker.setMap(map); $('body').append('
') $("#targetdiv").load('ProgressBar1.jsp'); var innerhtml=document.getElementById("targetdiv"); var infowindow = new google.maps.InfoWindow({ content: innerhtml, maxWidth:200, buttons:{close:{visible: false}}, }); infowindow.open(map,marker); //openInfoWindowHtml(document.getElementById("targetdiv"), {maxWidth:200, buttons:{close:{visible: false}}}); marker.setMap(map);` – Visva Dec 12 '13 at 13:56
You are already have the code: `buttons:{close:{visible:false}}`. It should work, what browser are you using? – Shahe Dec 13 '13 at 06:45
i am using mozilla firefox 24.0 – Visva Dec 16 '13 at 04:53
4

This answer is dated. It applies to Google Maps API 2, which Google no longer supports. The new API doesn't have an openInfoWindowHtml function. – Michael Scheper Jul 22 '14 at 04:28

score 0 · Answer 7 · answered Apr 13 '16 at 17:17

0

I did it setting closeBoxURL to an empty string on the options object

infoboxOptions = {

    closeBoxURL: '',
    ...

}

var infobox = new InfoBox(infoboxOptions);

answered Apr 13 '16 at 17:17

Agu Dondo

12,638
7
57
68

score 0 · Answer 8 · edited Aug 01 '17 at 11:40

0

You can try this

.gm-style-iw + div{ display: none; } // hide div

.gm-style-iw + div + img{ display: none; } // hide img

edited Aug 01 '17 at 11:40

Rob

26,989
16
82
98

answered Aug 01 '17 at 11:38

Amit kumar

1

score 0 · Answer 9 · answered Feb 05 '21 at 17:04

0

.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

answered Feb 05 '21 at 17:04

Roman T.

333
3
10

score 0 · Answer 10 · answered May 01 '21 at 06:00

0

Add this in your CSS:

button.gm-ui-hover-effect {
   visibility: hidden;
}

This worked perfectly with Maps API v3.43

answered May 01 '21 at 06:00

Saurabh R S

3,037
1
34
44

remove close icon from the google map info window

10 Answers10

Linked