Bing Map V8 Infobox Visible not working
<p>Example from <a href="https://msdn.microsoft.com/en-us/library/mt750644.aspx" rel="nofollow noreferrer">Bing map V8 official documentation</a>. By default infobox is given false but inspite its displaying for the first time.</p>

<pre><code>            &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;meta charset="utf-8" /&gt;
        &lt;script type='text/javascript'
                src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
        var map, clusterLayer, infobox;

        function GetMap() {
            map = new Microsoft.Maps.Map('#myMap', {
                credentials: 'Bing Map Key'
            });

            //Add an infobox to the map.
            infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });
            infobox.setMap(map);

            Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function () {
                //Create a clustering layer
                clusterLayer = new Microsoft.Maps.ClusterLayer(createCustomPushpins(100), {
                    clusteredPinCallback: createCustomClusterPushpins,
                    callback: createPushpinList
                });
                map.layers.insert(clusterLayer);
            });
        }

        function createCustomPushpins(size) {
            //Generate random pushpins within the map bounds.
            var pins = Microsoft.Maps.TestDataGenerator.getPushpins(size, map.getBounds());

            for (var i = 0; i &lt; size; i++) {
                //Create a title for each pushpin.
                pins[i].setOptions({ title: 'Pushpin #' + i });

                //Add handler for the pushpin click event.
                Microsoft.Maps.Events.addHandler(pins[i], 'click', pushpinClicked);
            }

            return pins;
        }

        function createCustomClusterPushpins(cluster) {
            //Create a title for the cluster.
            cluster.setOptions({
                title: 'Cluster of ' + cluster.containedPushpins.length + ' pins'
            });

            //Add handler for the cluster click event.
            Microsoft.Maps.Events.addHandler(cluster, 'click', pushpinClicked);
        }

        function pushpinClicked(e) {
            //Show an infobox when a pushpin is clicked.
            showInfobox(e.target);
        }

        function createPushpinList() {
            //Create a list of displayed pushpins each time clustering layer updates.

            if (clusterLayer != null) {
                infobox.setOptions({ visible: false });

                //Get all pushpins that are currently displayed.
                var data = clusterLayer.getDisplayedPushpins();
                var output = [];

                //Create a list of links for each pushpin that opens up the infobox for it.
                for (var i = 0; i &lt; data.length; i++) {
                    output.push("&lt;a href='javascript:void(0);' onclick='showInfoboxByGridKey(", data[i].gridKey, ");'&gt;");
                    output.push(data[i].getTitle(), "&lt;/a&gt;&lt;br/&gt;");
                }

                document.getElementById('listOfPins').innerHTML = output.join('');
            }
        }

        function showInfoboxByGridKey(gridKey) {
            //Look up the cluster or pushpin by gridKey.
            var clusterPin = clusterLayer.getClusterPushpinByGridKey(gridKey);

            //Show an infobox for the cluster or pushpin.
            showInfobox(clusterPin);
        }

        function showInfobox(pin) {
            var description = [];

            //Check to see if the pushpin is a cluster.
            if (pin.containedPushpins) {

                //Create a list of all pushpins that are in the cluster.
                description.push('&lt;div style="max-height:75px;overflow-y:auto;"&gt;&lt;ul&gt;');
                for (var i = 0; i &lt; pin.containedPushpins.length; i++) {
                    description.push('&lt;li&gt;', pin.containedPushpins[i].getTitle(), '&lt;/li&gt;');
                }
                description.push('&lt;/ul&gt;&lt;/div&gt;');
            }

            //Display an infobox for the pushpin.
            infobox.setOptions({
                title: pin.getTitle(),
                location: pin.getLocation(),
                description: description.join(''),
                visible: true
            });
        }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="myMap" style="position:relative; width:600px; height:400px;"&gt;&lt;/div&gt;
        &lt;br /&gt;
        &lt;div id="listOfPins" style="max-height:250px;width:250px;overflow-y:scroll;"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>As per official documentation, we have to pass visible false while instantiating the infobox object (<strong>infobox = new Microsoft.Maps.Infobox(map.getCenter(), { visible: false });</strong>) Any suggestions where I am going wrong?</p>