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

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

                        });

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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