Google Map V3 - Allow only one infobox to be displayed at a time

Question

I'm moving from infoWindow to infoBox for better looking info windows.

I have a number of markers on the map. What I want to do is when one infoBox is already opened, if the user clicks on other markers, the current infoBox will close automatically and new infoBox will open so that the user does not need to close the current infoBox, and there will always be only one infoBox displayed at a time.

Here's the demo and code of my current solution http://jsfiddle.net/neo3000ultra/9jhAy/

Thanks in advance!

Right, right, I know, but it's the same concept, design and fundamental code. But no matter, you've reached a solution to your issue and that's what is important. — Sean Mickey, Jun 07 '12 at 00:07

Dr.Molle · Accepted Answer · 2012-06-06T15:44:35.043

Change this part:

        google.maps.event.addListener(marker, "click", function (e) {
            ib.open(map, this);
        });

        var ib = new InfoBox(myOptions);

       google.maps.event.addListener(marker2, "click", function (e) {
            ib2.open(map, this);
        });

        var ib2 = new InfoBox(myOptions2);

to the following:

    var ib = new InfoBox();

    google.maps.event.addListener(marker, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions)
        ib.open(map, this);
    });

   google.maps.event.addListener(marker2, "click", function (e) {
        ib.close();
        ib.setOptions(myOptions2)
        ib.open(map, this);
    });

Works for me, also in IE9: http://jsfiddle.net/doktormolle/9jhAy/1/

Note the use of ib.close() before opening the infoBox, seems to be the trick.

geocodezip · Answer 2 · 2012-06-06T05:40:19.453

3

The usual suggestion for a single infowindow is to only create one, then reuse it for all the markers (changing its content).

Here is an example that does that with the v3 API (I think of it as "v2 infowindow behavior" because the v2 API only allowed a single infowindow) http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html

Here is another example based off of Mike Williams' v2 tutorial: http://www.geocodezip.com/v3_MW_example_map1.html

and your example modified: http://jsfiddle.net/uGnQb/6/

edited Jun 06 '12 at 05:40

answered Jun 06 '12 at 05:09

geocodezip

158,664
13
220
245

thanks. I tried create one infoBox object and reuse it, but couldn't get it work.... – Michael Wu Jun 06 '12 at 05:13
hi, I found a very tricky problem in your solution. It works fine in Firefox, but if you test it in IE9, when you click on marker2, then close it by clicking on marker1, then click on marker2 again, then content of marker2's infoBox will not displayed, instead it displays a corrupted infoBox. Do you have any idea on what's happening? – Michael Wu Jun 06 '12 at 05:54
I don't have IE 9, in IE 8 the debugger points to a problem in the infoBox library. I would suggest using a normal infoWindow, or fixing the problem in infoBox. – geocodezip Jun 06 '12 at 05:59
http://i69.photobucket.com/albums/i45/Neo3000ultra/Untitled.png the problem looks like this – Michael Wu Jun 06 '12 at 06:02
That is the same problem I see in IE8. My previous advice applies. – geocodezip Jun 06 '12 at 06:12

Google Map V3 - Allow only one infobox to be displayed at a time

2 Answers2

Linked

Related