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