Google Maps API V3 Closing InfoBox

Question

I have a Google Map Version 3 that I can't quite get working as I want. When the map opens there are several markers on the page and clicking or hovering on the marker opens a little InfoBox with the name of the hotel. Clicking on another marker closes the first InfoBox and opens a new one on the new marker. The problem comes with closing the last InfoBox.

If I allow the closeBox in the options, the closeBox (little cross in a square) gets left on the screen when the rest of the InfoBox is closed. This only happens when the InfoBox closes because another one has been opened. As I can't find a solution to this, I intended to do away with the closeBox and let users click a blank area of map to get rid of the final InfoBox. However, at the moment, that doesn't work either.

The problem page can be seen at http://www.littlehotels-testdomain.co.uk/spain/abadia.php (click on "See a location map for this hotel" just to the right of the photo).

The bit of code which should make this work is:

      google.maps.event.addListener(hotelmarker, 'mouseover', function() {
    var ib = new InfoBox(ibOptions);
    boxText.innerHTML = hotelname;
    ib.open(map, hotelmarker);
    });
  google.maps.event.addListener(map, 'click', function() {
    ib.close(map, hotelmarker);
    });

Is there something in the second event listener that I am missing?

Answer 1

You need to make your ib (infoBox reference) global. Put it outside your Listener functions.

Answer 2

Andy's 47th rule of JavaScript programming: never use a global variable to accomplish something you can do with a single line using jQuery:

$(".infoBox").hide();