Question

I use the setHtmlContent to set the content of a infoBox. As per the documentation the infoBox is initially anchored at the top-left. If I move the map (even just a little bit) the infoBox jumps position. Its fine in IE8, but does it in FireFox and Chrome.

Does anybody have any idea/experience or any solutions in solving this?

Info boxes are added in the following way (for reference)…

var infoboxOptions = { width: 300, height: 150, htmlContent: html, showCloseButton: true, zIndex: 99, offset: new Microsoft.Maps.Point(0, 0), showPointer: true, visible: false };
var location = new Microsoft.Maps.Location(pinArray[i].DPLat, pinArray[i].DPLong)
infobox = new Microsoft.Maps.Infobox(location, infoboxOptions);

And then pushed to the map.

Answer 1

I was having the same issue in FF and Chrome. The fix I used was to listen to the viewendchange event and then resetting the infobox’s location when the event dispatched. This works in IE7, IE8, IE9, FF, Chrome and Safari. Not ideal, but it works.

function showInfoBox( event ) {
    var
        location = event.target.getLocation(), // event from pushpin click
        map = this.map, // my map reference
        _that = this
    ;

    // create the infobox
    var infoboxOptions = { width: 300, height: 150, htmlContent: html, showCloseButton: true, zIndex: 99, offset: new Microsoft.Maps.Point(0, 0), showPointer: true, visible: false };
    this._infoBox = new Microsoft.Maps.Infobox( location , infoboxOptions );
    map.entities.push( this._infoBox );

    // local function to reset our position
    function updateInfoboxLocation() {
        _that._infoBox.setLocation( location );
    }

    // reset only on new display of a box, this fixes the other issues of a user moving
    // the box and it being offset
    if( this._infoEventId ) Microsoft.Maps.Events.removeHandler( this._infoEventId );

    // listen for the end event, update location
    this._infoEventId = Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateInfoboxLocation);

    // center the view on the pin location
    map.setView( { center: location } );
}