CODEWITHSUNDEEP
javascriptgoogle-maps
Visva
Visva

Reputation: 194

remove close icon from the google map info window

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

Answers (10)

Saurabh R S
Saurabh R S

Reputation: 3177

Add this in your CSS:

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

This worked perfectly with Maps API v3.43

Upvotes: 0

Roman T.
Roman T.

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

Hady Zeitouny
Hady Zeitouny

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

PeeBee
PeeBee

Reputation: 21

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

That works as at today in Chrome and Edge

Upvotes: 2

hassanrazadev
hassanrazadev

Reputation: 664

This worked for me with just css

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

Upvotes: 18

Amit kumar
Amit kumar

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

Jovanni G
Jovanni G

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

Agu Dondo
Agu Dondo

Reputation: 13619

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

infoboxOptions = {

    closeBoxURL: '',
    ...

}

var infobox = new InfoBox(infoboxOptions);

Upvotes: 0

Shahe
Shahe

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

Eugene Godun
Eugene Godun

Reputation: 376

You can hide close button with CSS:

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

Upvotes: 35

Related Questions