Bing Maps Infobox setHtmlContent doesn't work

Question

I have the following code for Bing Maps in my website. It follows the examples given on http://www.bingmapsportal.com/isdk/ajaxv7#Infobox20. But neither the htmlContent property in the infoboxOptions, nor the setHtmlContent() method seem to be adding the background color that I want for the Infobox. The Infobox itself renders properly. Other properties also seem to work.

$(document).ready(function () {

    var map = null;

    function getMap() {

        // Get the Map
        var map = new Microsoft.Maps.Map(document.getElementById('mapDiv'),
                  {
                      credentials: "Bing Maps Key",
                      center: new Microsoft.Maps.Location(42, -120.5),
                      mapTypeId: Microsoft.Maps.MapTypeId.road,
                      zoom: 4
                  });

        // Specify InfoBoxOptions
        var infoboxOptions = {
            showPointer: false,
            showCloseButton: false,
            width: 500, height: 700,
            title: 'Results',
            offset: new Microsoft.Maps.Point(-900, -400),
            htmlContent: '<div style="background-color:red; width:500px; height:700px;"></div>',
            visible: true
        };

        var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions);
        map.entities.push(defaultInfobox);

        defaultInfobox.setHtmlContent('<div style="background-color:red; min-width:500px; min-height:700px;"></div>');
    }

    getMap();

});

How do I add my HTML to the Infobox? I have used background color here but the idea is that I will show a custom HTML that might have several click events.

Answer 1

I have a blog post on how to set the customer HTML of infoboxes here: http://rbrundritt.wordpress.com/2011/11/08/simple-custom-infoboxes-in-bing-maps-v7/