Search code examples
jquerygoogle-mapsgoogle-maps-api-3

GMaps V3 InfoWindow - disable the close "x" button

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.

Solution

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