GMaps V3 InfoWindow - disable the close "x" button

Question

From what I see, in v2 of GMaps API there was a property "buttons" of the InfoWindow object that one could define in a way that given InfoWindow has no close button:

marker.openInfoWindowHtml("No Close Button",{buttons:{close:{show:4}}});

The above however does not apply for v3. Does anybody know a way to do it? I read about an utility that replaces InfoWindow called InfoBox but it has not been developed for the past 2 years. I'm currently using the latest 3.13 version of Gmaps v3 API.

A workaround with jQuery is acceptable, if there is no better solution.

Penis

Answer 1

Update

Displaying a <div> on top of a google map is straight forward :

example css:

div.info {
    position: absolute;
    z-index: 999;
    width: 200px;
    height: 100px;
    display: none;
    background-color: #fff;
    border: 3px solid #ebebeb;
    padding: 10px;
}

A info class <div> somewhere in the markup :

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div>

Always nice to have a short reference to the div :

var info = document.getElementById('myinfo');

The more tricky part, showing the <div>, how and when - here I just assign a click handler to the map (after it is created) and show the info <div> at mouse location XY inside the map :

google.maps.event.addListener(map, 'click', function(args) {
  var x=args.pixel.x; //we clicked here
  var y=args.pixel.y;

  info.style.left=x+'px';
  info.style.top=y+'px';
  info.style.display='block';
});

What you gain with this is, that the info <div> follows you around on the map, every time you click.

• You will need more styling so it suits your need, eg so it "looks like an InfoBox", but that should be easy to find out, I am not a librarian :)
• And maybe later on something to close the info with, but that you didn't want in the first place :)

---

Original answer

You cant! There is no way to do this in the current v3.13 InfoWindow options.

A workaround is to disable the image containing the X :

<style>
img[src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png"] {
    display: none;
}
</style>

But this is in no way advisable!

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png is just what the infowindow is referring to today. Tomorrow, or in a month, or in a year, this image-reference for sure has changed. As you can see if you search for similar "solutions", made over time - like this. They are all broken today, eg the effort is meaningless.

I think there is extremely good logic in google "refusing" to follow the request for hiding the close-button. If you not need a close-button, what do you need an InfoWindow for anyway? When you are better off just to show a <div> on the map.

Metempsychosis

Could you instead hint on how to display a <div> on the map that looks like an InfoBox? – Penis

"If you not need a close-button, what do you need an InfoWindow for anyway?" - you can close the infoWindow with the mouseout event... – Parlay

In my case there is no image with above src but the style with -webkit-mask-image is present. – Deputation

Answer 2

You can also do it through the css.

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

---

edit january 2019
as @antmeehan said in the comment,

Google have changed the HTML, and the close button is now a button element rather than a div

So the css code to hide the "x" button is now:

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

Satsuma

Worked for me and it seems to be the the best and easies solution – Fidelia

Still somewhat subject to Google changing how things are implemented - depends on the info window class staying the same, and close button being the immediate next div after it. But at least its simple. – Kiefer

Google have changed the HTML, and the close button is now a button element rather than a div. – Crapulous

Thanks for this. one question tho, why did you use + in your declaration? It works by declaring .gm-style-iw button without the + sign. Actually it should be .gm-style-iw > button because if you have other custom buttons within the box, it'd be hidden too. Placing it as an answer and referring to this for future users. – Pentstemon

The + operator will select all <button> elements that are placed immediately after elements that are of class gm-style-iw. The > operator will select all <button> elements where the parent element contains the class .gm-style-iw. I think both may accomplish the same goal. – Satsuma

I added !important , because button style is directly on element, so you need to add it to get priority for your CSS – Hartsfield

Answer 3

if using jquery just add this

$(".gm-style-iw").next("div").hide();

Denticulation

you can do this with pure CSS, just use the + symbol to get next sibling: .gm-style-iw + div { display: none; } – Anandrous

Answer 4

To extend on Louis Moore's answer, you can also center the text after removing the close button:

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

Without Centering:

With Centering:

Westmorland

This is really the correct and most effective answer by far. But honestly why doesn't google just support hiding it. – Sulphurbottom

Answer 5

Thanks Tushar, but also you need put this code in event handler

google.maps.event.addListener(infowindow, 'domready', function(){
    $(".gm-style-iw").next("div").hide();
});
    

Udder

Answer 6

It should be .gm-style-iw > button to avoid other custom buttons we might have within the box to be hidden too:

.gm-style-iw > button {
  display: none !important;
}

Pentstemon

Thank a lot, save my day. :) – Chaille

Answer 7

I used the answer given by Tushar Gaurav, but expanded it a little...

$(".gm-style-iw:contains(" + infoText + ")").css("left", function() {
    return ($(this).parent().width() - $(this).width()) / 2;
}).next("div").remove();

That will remove the X from an infowindow with the text in infoText, and then recenter the text as it's off-center after removing the close button.

Just adding this for anyone else who stumbles across this page as I did.

Am

I like this answer since it allows to change a specific infowindow and not just all. For unknown reason the text is not really centered but can be done with css: text-align: center – Single

Answer 8

closeBoxURL: ""

as stated before doesn't apply for InfoWIndow. This is an option on the InfoBox.

You may for example use this CSS workaround to remove the X, and the surrounding clickable button:

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

And as davidkonrad said. This is a workaround on the code as it is today. It will likely be changed.

Exegetic

Answer 9

My own way (without Jquery) and with realign to the center of the infoWindow:

var content = document.querySelector('.gm-style-iw');
content.parentNode.removeChild(content.nextElementSibling);
content.style.setProperty('width', 'auto', 'important');
content.style.setProperty('right', content.style.left, 'important');
content.style.setProperty('text-align', 'center', 'important');

Obola

Answer 10

This works

.gm-style-iw > button {display: none !important;}

Kutaisi

Answer 11

Anno domini 2021 this work better for me

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

Surprint

Still working in early Q2 2024 👏 – Entrust

Answer 12

My solution:

            google.maps.event.addListener(marker, 'click', function() {

            var wnd = new google.maps.InfoWindow({
                content: "<table id='viewObject' >...</table>"
            });

            google.maps.event.addListener(wnd, 'domready', function(){

                $("#viewObject").parent().parent().next().remove();
            });

            wnd.open(map, marker);
        });

Ageless

Thanks, it works if you only want to remove the x only for some of the info windows – Killigrew

Answer 13

=============  HTML  ==============
<agm-map #gm [latitude]="lat" [longitude]="lng" #AgmMap [fitBounds]="true">
 <agm-marker
          (mouseOver)="onMouseOver(infoWindow, gm)"
          (mouseOut)="onMouseOut(infoWindow, gm)"
        >

         <div id="test">
            <agm-info-window #infoWindow></agm-info-window>
          </div>
        </agm-marker>
      </agm-map>

=============  TS  ==============

onMouseOver(infoWindow, gm) {
console.log(infoWindow);
if (gm.lastOpen != null) {
 gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
setTimeout(() => {
  var x = document.getElementsByClassName('gm-ui-hover-effect')[0].remove();
}, 10);
}
onMouseOut(infoWindow, gm) {
gm.lastOpen = infoWindow;
// infoWindow.close();

}

Deportation

Answer 14

const infowindow = new google.maps.InfoWindow({
  content: address,
  headerDisabled: true
});

Jose

Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Gandy

Answer 15

You can use this. This will not hide other images like zoom control, pan control etc. on dom ready of info window you can use this.

google.maps.event.addListener(infoWindow, 'domready', function () {

      document.querySelector(".gm-style-iw").nextElementSibling.style.display = "none";
});

Mirador

Answer 16

I can't find correct answer in here, so I fixed it myself. It will work well.

google.maps.event.addListener(infowindow, 'domready', function(){
      $(".gm-style-iw").parent().find("button").removeAttr("style").hide();
});

Gatecrasher

Answer 17

.gm-style-iw + button {display: none !important;}

Coumarone

What's the difference from this answer? – Isabel

Answer 18

I couldn't get any of the $(".gm-style-iw").next("div").hide(); answers to work even when calling the code after the DOM was loaded, since there was a delay between the code being called and the info window being created. What I did was create an interval that runs until it finds the info window and removes the "X" element. If there's a better way please tell me.

var removeCloseButton = setInterval(
    function()
    {
        if ($(".gm-style-iw").length)
        {
            $(".gm-style-iw").next("div").remove();
            clearInterval(removeCloseButton);
        }
    },
    10
);

Sinless

Answer 19

Using Archers method I need to do

$(".gm-style-iw").css("left", function() { //remove close and recenter
  return ($(this).parent().width() - $(this).find(">:first-child").width()) / 2;
}).next("div").remove();

Pearlstein

Answer 20

google.maps.event.addListener(infowindow, 'domready', function() {

    var iwOuter = jQuery('.gm-style-iw');

    // Reference to the div that groups the close button elements.
    var iwCloseBtn = iwOuter.next();

    // Apply the desired effect to the close button
    iwCloseBtn.remove()
});

As there is no option to hide this by API parameter, you have to find the element by targeting the content window and remove it.

Hope this helps :)

Kaliningrad

Answer 21

var infoWindows = new google.maps.InfoWindow({ headerDisabled: true, });

Jose

Answer 22

in jQuery's gmap3 plugin this can be accomplished using

google.maps.event.addListener($('#map').gmap3({get:{name:"infowindow"}}), 'domready', function(){
    $(".gm-style-iw").next("div").remove();
});

Ixtle

Answer 23

May 2021 : Add this in your CSS:

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

This worked perfectly with Maps API v3.43

Wilbourn

Answer 24

Inspect it - it's a div with a class of close on it - you can target it with CSS and set it to display: none;

Penult

Answer 25

You can just use the option

closeBoxURL : ""

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html

From Google Documentation

closeBoxURL | string | 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.

Example

   var infowindow = new google.maps.InfoWindow({
                          closeBoxURL: "",
                          closeBoxMargin : ""

                        });

Erhard

Err, just ready the convoluted answer above. No idea how it's marked as correct. This is the simple and correct answer! Nice one! – Lymphatic

I did exactly the same as you... "WTF did I just read" was my closest thoughts... Sadly the user "nan" above correctly answered as well but was down voted with the correct answer. I upvoted him and added my own spice to the answer. – Erhard

infowindow != infobox – Pentheus

funny thing, if you google for "infobox close button hide", it brings you exactly to this page and this is the only solution that works lol – Wizard

also didnt work for me. i think its don't work fo version 3.20 – Pressmark

Answer 26

You can set "closeBoxURL" property of the Info Window to "" and it will make the button disappear.

var infowindow = new google.maps.InfoWindow({
    content: contentString,
    closeBoxURL: ""
});

Addicted

why did I get -1 to my answer? – Addicted

yes, not a valid option: developers.google.com/maps/documentation/javascript/… – Dunfermline

@Addicted It's not working for me.. I have tried – Prevailing