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:

Answer 1

=============  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();

}

Answer 2

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 adviceable!

src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png is just what the infowindow is refering 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.

Answer 3

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

Answer 4

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.

Answer 5

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

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