GMaps V3 InfoWindow - disable the close "x" button

if using jquery just add this

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

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.

enter image description here

  • 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>

enter image description here

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.


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:


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