bing maps api prevent same infobox from opening while currently open

Question

I am using the Bing Maps API and am hitting a wall with this issue. When a pin is clicked, the infobox is displayed. However, if you continue to click the pin it'll keep opening more infoboxes. How do I prevent this and just have one info box open?

// MAP FUNCTIONS

Map.prototype.addPins = function (pins) {
    if (!pins.length) return;

    var bing = getBing(this);

    var showPopup = function (e) {
        var pin = e.target,
            infoboxOptions = { pushpin: pin },
            infobox = new Microsoft.Maps.Infobox(pin._location, infoboxOptions);
        infobox.setHtmlContent(pin._data.popup);

        bing.entities.push(infobox);

        $('a.close').on('click', function () {
            infobox.setHtmlContent("");
        });
    };

    for (var i = 0; i < pins.length; i++) {
        var pin = new Microsoft.Maps.Pushpin(pins[i].position, {
            draggable: false,
            htmlContent: '<i class="icon ' + pins[i].cssClass + '" />'
        });
        pin._data = pins[i];

        Microsoft.Maps.Events.addHandler(pin, 'click', showPopup);
        bing.entities.push(pin);
    }
};

Answer 1

You are creating a new infobox every time the pushpin is clicked. A much more efficient way to handle infoboxes is to create one and reuse it. Here is a blog post that outlines how do this:

https://rbrundritt.wordpress.com/2011/10/13/multiple-pushpins-and-infoboxes-in-bing-maps-v7/