Google Maps API V3: close all infoboxes when a new one is opened

Question

I'm working with Google Maps API V3 and infoboxes, and I'm trying to set it up so that only one infobox is open at any given time.

I've seen a ton of related threads, but I can't figure out how to modify them to get them to work. I vaguely know that it needs to be bound to a

google.maps.event.addListener(map,'click',function() {

});

but that's pretty much the extent of what I could figure out.

Here's my code:

var boxList =[]

function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(35.542284,-76.856),
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    $(document).ready(function(){
        $.getJSON('test.json', function(data) {

                for (i = 0; i < data.length; i++) {
                    var item = data[i];
                    var myLatlng = new google.maps.LatLng(item.lat, item.longs);
                    var contentString = item.name;

                    // accidentally left this extraneous code in here...
                    // var infowindow = new google.maps.InfoWindow({
                    //    content: item.name
                    // });

                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: item.name,
                        icon: item.type + ".png"

                    }); // end add new marker

                    var boxText = document.createElement("div");
                    boxText.style.cssText = "border: 1px solid black;";
                    boxText.innerHTML = item.name;

                    var myOptions = {
                        content: boxText,
                        boxStyle: {
                              opacity: 0.75,
                              width: "280px"
                            },
                        closeBoxMargin: "12px 4px 2px 2px",
                    };


                    var ib = new InfoBox(myOptions);
                    boxList.push(ib);

                    google.maps.event.addListener(marker,'click',
                    (function(marker, i) {
                        return function() {
                            boxList[i].open(map, this);
                        }
                    })(marker, i));

                } //end for loop 

        }) // end getJSON

    }); // end jQuery

} // end initialize

EDIT: I should mention that I got this working with InfoWindows using this plugin, but I need to be able to style them to match a specific look and feel for a website, which is the only reason I'm even banging my head against InfoBoxes to begin with.

I would really appreciate any pointers in the right direction! Thanks in advance.

Why are you creating an Infowindow when you are creating an InfoBox anyway? — Shiridish, Jan 24 '13 at 03:29
Oh, good catch, that's cruft leftover from the first iteration of that code. It's not actually doing anything, I'll comment it out of the OP. — Phire, Jan 24 '13 at 03:45

score 4 · Accepted Answer · answered Jan 24 '13 at 05:26

Your coding in the for loop is the culprit here. You are creating a new InfoBox every time in the loop so you are left with new InfoBox with every marker.

This code is the one that creates a new InfoBox every time in the loop:

                var boxText = document.createElement("div");
                boxText.style.cssText = "border: 1px solid black;";
                boxText.innerHTML = item.name;

                var myOptions = {
                    content: boxText,
                    boxStyle: {
                          opacity: 0.75,
                          width: "280px"
                        },
                    closeBoxMargin: "12px 4px 2px 2px",
                };


                var ib = new InfoBox(myOptions);

So to have a single instance of InfoBox, write the above code before the loop, so that you are only initializing the InfoBox once.

Since boxText.innerHTML is dynamic in the above code, set this content in the AddListener function.

So the final code should be-

                for (i = 0; i < data.length; i++) {
                var item = data[i];
                var myLatlng = new google.maps.LatLng(item.lat, item.longs);
                var contentString = item.name;

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: item.name,
                    icon: item.type + ".png"

                }); // end add new marker
              AddInfoBox(marker, contentString); //function call
            } //end for loop 

            function AddInfoBox(myMarker, content)
            {
                google.maps.event.addListener(myMarker,'click',function() {
                        ib.setContent(content); //not sure about this statement
                        ib.open(map, this);
                    }
                });

            }

AWESOME, this definitely put me on the right path to what I needed. I had to move some stuff around to get closure working right, but here's the final working example: http://pastebin.com/067WF5xZ. Thank you so much! — Phire, Jan 24 '13 at 18:17

score 0 · Answer 2 · answered Jan 24 '13 at 03:13

0

Use gmaps.js, look add marker option, plugin it's easy to use.

answered Jan 24 '13 at 03:13

greg

107
1
4

Thanks for the tip, but I don't think it's possible to style the marker tooltips with that plugin, which is the only reason I'm using InfoBoxes rather than InfoWindows to begin with. – Phire Jan 24 '13 at 03:50

score 0 · Answer 3 · answered Jan 24 '13 at 03:22

0

I believe this example is what you're looking for. It shows how to share a single info window between multiple markers.

answered Jan 24 '13 at 03:22

dimusic

4,123
2
28
31

Unfortunately, that example uses the InfoWindow, which basically can't be styled. I got what I needed working with InfoWindows, but InfoBoxes are rather less well documented. – Phire Jan 24 '13 at 03:48
They are basically the same you just need to use infoBox.setContent() a bit differently. here is the same example using infoBox - http://jsbin.com/eqarus/1/edit – dimusic Jan 24 '13 at 04:15

Google Maps API V3: close all infoboxes when a new one is opened

3 Answers3