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.

Answer 1

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

            } 

Answer 2

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

Answer 3

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